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

/*PC*/
@media only screen and (min-width: 769px) {
.rate_bg_img {
	background:url(../images/rate/bg_img.jpg) center center no-repeat;
	background-size: cover;
	width:100%;
	height:300px;
    position: relative;
}

.rate_main_img {
	background:url(../images/rate/img.jpg) center center no-repeat;
	background-size: cover;
	width:100%;
    position: relative;
	padding:3% 0;
}

.rate_list {
	width:100%;
	margin:auto;
	padding:0;
	list-style-type:none;
}

.rate_list li {
	position:relative;
	width:32%;
	margin-right:2%;
	margin-bottom:2%;
	float:left;
	position: relative;
	overflow: hidden;
}

.rate_list li:nth-child(3n+3) {
	margin-right:0;
}

.rate_list li img {
	width:100%;
	height:auto;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}

.rate_list li:hover img{
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.rate_list li h3 {
	width:96%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:100;
	background:rgba(0,0,0,0.8);
	font-size:1.2em;
	padding:2%;
	color: #FFFFFF;
	margin:auto;
	text-align: center;
	/* border-radius */
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}


}


/*sp*/
@media only screen and (max-width: 768px) {
.rate_bg_img {
	background:url(../images/rate/bg_img.jpg) center center no-repeat;
	background-size: cover;
	width:100%;
	height:120px;
    position: relative;
}

.rate_main_img {
	background:url(../images/rate/img.jpg) center center no-repeat;
	background-size: cover;
	width:96%;
    position: relative;
	padding:3% 2%;
}


.rate_list {
	width:100%;
	margin:auto;
	padding:0;
	list-style-type:none;
}

.rate_list li {
	position:relative;
	width:49%;
	margin-right:2%;
	margin-bottom:2%;
	float:left;
	position: relative;
	overflow: hidden;
}

.rate_list li:nth-child(3n+3) {
	margin-right:0;
}

.rate_list li img {
	width:100%;
	height:auto;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}

.rate_list li img:hover {
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.rate_list li h3 {
	width:96%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:100;
	background:rgba(0,0,0,0.8);
	font-size:1.2em;
	padding:2%;
	color: #FFFFFF;
	margin:auto;
	text-align: center;
	/* border-radius */
	border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}


}