/* >> m-boxlink CSS
----------------------------------------------------*/
.m-boxlink .box-link{width: 100%; display: block; margin-bottom: 1em; border: 1px solid #dddddd;}

.box-title{bottom: 10%; z-index: 2; color: #fff; font-weight: 300; position: absolute;}
    
.box-title span.red{background: #d14233;}
.box-title span.blue{background: #3498db;}
.box-title span.green{background: #2ecc71;}
.box-title span.yellow{background: #f4a62a;}

.box-title span.red,
.box-title span.blue,
.box-title span.green,
.box-title span.yellow{padding: 10px 1em; font-size: 1em; border-top-right-radius: 2px; border-bottom-right-radius: 2px;}

/* >> PC
--------------------------------------------*/
@media only screen and (min-width: 520px){
    .m-boxlink .box-link{width: 48.4848%; margin-right: 3.0303%; float: left; margin-bottom: 2em;}
    .m-boxlink .box-link:nth-child(2n){margin-right: 0;}
    
    .box-title span{display: block; float: left;}
    .csucsok_1{background: url(../images/img-csucsok_1.png) no-repeat left center; width: 9px; height: 36px;}
    .csucsok_2{background: url(../images/img-csucsok_2.png) no-repeat left center; width: 9px; height: 36px;}
    .csucsok_3{background: url(../images/img-csucsok_3.png) no-repeat left center; width: 9px; height: 36px;}
    .csucsok_4{background: url(../images/img-csucsok_4.png) no-repeat left center; width: 9px; height: 36px;}
        
}
@media only screen and (min-width: 960px){

}

@media only screen and (min-width: 1000px){
    .box-title span.red,
    .box-title span.blue,
    .box-title span.green,
    .box-title span.yellow{font-size: 1.25em;}
    
    .csucsok_1,
    .csucsok_2,
    .csucsok_3,
    .csucsok_4{height: 40px;}
}

@media only screen and (min-width: 1100px){
    .box-title span.red,
    .box-title span.blue,
    .box-title span.green,
    .box-title span.yellow{font-size: 1.5em;}
    
    .csucsok_1,
    .csucsok_2,
    .csucsok_3,
    .csucsok_4{height: 44px;}
}