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

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

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

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

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

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

.slope_list li figure {
	width: 100%; height: auto; overflow: hidden;}

.slope_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;
}

.slope_list li figure: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);
}

.slope_list li .line {
	position: absolute;
	top: 5%;
	left: -38%;
	width: 100%;
	transform: rotate(-45deg);
	background: #FFF;
}


.slope_list li h3 {
	background: #4080c2;
	padding: 1%;
	color: #FFFFFF;
	margin: 5px auto;
	text-align: center;
	/* border-radius */
	/*border-radius: 3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;*/
}

.slope_list li h4 {
	font-size:0.9em;
	color:#333333;
	margin: 0 auto;
	text-align:center;
	padding: 1%;
}


}


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

.slope_main_img {
	background:url(../images/slope/img.jpg) center center no-repeat;
	background-size: auto 100%;
	width:96%;
    position: relative;
	padding:3% 2%;
}

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

.slope_list li {
	width:49%;
	margin-right:2%;
	margin-bottom:2%;
	float:left;
}

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

.slope_list li img {
	width:100%;
	height:auto;
}

.slope_list li h3 {
	background:#4080c2;
	padding:1%;
	color:#FFFFFF;
	margin:5px auto 0;
	text-align:center;
	/* border-radius */
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.slope_list li h4 {
	font-size:0.8em;
	color:#333333;
	margin:0 auto;
	text-align:center;
}

}