@charset "utf-8";
/* Roba-Mimi Index */

.box-3row{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}


.box-3row li{
width: 30%;
margin: 0 auto 16px auto;
padding: 1em;
border: solid 1px #d4d4d4;
border-radius: 1em;
box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.2);
}


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

.compare-area .compare-box{
display: flex;
align-items: center;
width: 45%;
max-width: 470px;
padding: 1em;
border: solid 1px #d4d4d4;
border-radius: 1em;
}

.compare-area .compare-box img{
width: 120px;
height: auto;
margin: 0 1em 0 0;
}

.compare-area .compare-box div ul li{
}

.compare-area .compare-box div ul.withA li{
padding: 0 0 0 1.5em;
background-image: url(../images/icon-check.jpg);
background-repeat: no-repeat;
background-size: 1em auto;
background-position: left center;
}

.compare-area .compare-box div ul.withB li{
padding: 0 0 0 1.5em;
background-image: url(../images/icon-maru.png);
background-repeat: no-repeat;
background-size: 1em auto;
background-position: left center;
}

@media screen and (max-width: 768px) {
	.box-3row{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}


	.box-3row li{
		width: 46%;
	margin: 0 auto 16px auto;
	padding: 1em;
	border: solid 1px #d4d4d4;
	border-radius: 1em;
	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.2);
	}


	.compare-area{
		display: block;
	justify-content: space-between;
	align-items: center;
	}
	
		.compare-area > p {
			text-align: center;
			margin: 20px 0;
	}
	
	.compare-area > p img {
		transform: rotate( 90deg );
	}



	.compare-area .compare-box{
	padding: 1em;
	border: solid 1px #d4d4d4;
	border-radius: 1em;
	align-items: center;
		display: block;
		width: 100%;
		max-width: 100%;
	}
	
	.compare-area .compare-box p{
		text-align: center;
	} 

	.compare-area .compare-box img{
	width: 120px;
	height: auto;
	margin: 0 auto;
	}

	.compare-area .compare-box div ul li{
	}

	.compare-area .compare-box div ul.withA li{
	padding: 0 0 0 1.5em;
	background-image: url(../images/icon-check.jpg);
	background-repeat: no-repeat;
	background-size: 1em auto;
	background-position: left center;
	}

	.compare-area .compare-box div ul.withB li{
	padding: 0 0 0 1.5em;
	background-image: url(../images/icon-maru.png);
	background-repeat: no-repeat;
	background-size: 1em auto;
	background-position: left center;
	}


	
	
	
	
}