@charset "UTF-8";

/*******************************
 
#hero Css
 
*******************************/
.page #hero{
    background-image: url("../img/img_main.jpg");
}

/*******************************
 
.contents Css
 
*******************************/
section{
    margin-bottom: 70px;
	padding-top: 70px;
}
section h4{
    font-size: 18px;
    font-weight: bold;
    margin: 36px 0 15px;
}
section .list{
    margin-bottom: 20px;
    padding-bottom: 25px;
}
section .list ul li{
    margin-bottom: 10px;
}

section .case-bg-gry-d {
    background: #3d3d3d;
    color: #fff;
    padding: 12px 30px;
    font-size: 18px;
    letter-spacing:.03em;
	width: 180px;
}

.block-caselist{
	overflow: hidden;
}


.case{
    float:left;
    background: #3d3d3d;
    padding: 12px 30px;
    font-size: 18px;
    letter-spacing: .03em;
}
 
.case_ttl{
    background-color:#fff;
    float:left;
    color: #3d3d3d;
    padding: 11px 30px;
    font-size: 18px;
    letter-spacing: .03em;
    border: 1pt solid #ddd;
    box-sizing:border-box;
    width:70%;
	margin-bottom: 30px;
}
 
.box_in{
	margin:10px;
}

.box_in p{
	 color: #fff;
	 display:block;
}


@media screen and (max-width: 660px) {
section{
		padding-top: 0px;
	}
.case{
    width:100%;
}
.case_ttl{
    width:100%;
	margin-bottom:0px;
}
}



/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    section{
        margin-bottom: 40px;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){}