@charset "utf-8";


/*==============================================================*/
/* ナビゲーション */
/*==============================================================*/

.page-project .contentNavi li { width:25%;  width: calc(100% / 4); overflow: hidden;}

*::-ms-backdrop, .page-project .contentNavi li {
  width: 25%; /* IE11 */
}
.page-project .contentNavi li a{ padding-bottom:25px;}


/*==============================================================*/
/* メインイメージ */
/*==============================================================*/

.page-project #mainImg-l{

	background-color:#F2F2F2;
    background:url(../../img/project/top-mainimg.jpg) no-repeat left / cover;
}


.page-project #mainImg-l div{
	text-align:right;
		padding-top: 100px;
}

.page-project #mainImg-l p img{
	vertical-align:bottom;
	margin-left:5px;
}

.page-project #mainImg-l .copy{line-height:1;}

/*==============================================================*/
/* コンテンツトップ */
/*==============================================================*/


.page-project #contentsList {
  margin:0;
  display: flex;
  flex-wrap: wrap;
}

.page-project #contentsList li {
	width: 48%;
	margin: 1%;
	padding-bottom: 3%;
	overflow: hidden;
}

.page-project #contentsList li p{ margin-top:15px;}

.page-project #contentsList a{
	display:block;
	overflow: hidden;
	background-repeat:no-repeat;
	background-size: cover;
  background-position: right center;
	margin-bottom:0;
	height:auto;
}


.page-project #contentsList a div{background: url(../img/blue_dot_opa80.png); width:200px; /*height: 180px;*/    height: 240px;}

.page-project #contentsList li:nth-child(1) a { background-image: url(../../img/top/consulting02.jpg)}
.page-project #contentsList li:nth-child(2) a { background-image: url(../../img/top/consulting01.jpg)}
.page-project #contentsList li:nth-child(3) a {background-image: url(../../img/top/consulting07.jpg)}
.page-project #contentsList li:nth-child(4) a { background-image: url(../../img/top/consulting06.jpg); }

.page-project #contentsList li a:hover div{background: url(../img/blue_dot_opa90.png);}


@media screen and (max-width: 767px){
	.page-project #mainImg-l{margin-bottom: 20px;}
	.page-project #mainImg-l .copy{
            line-height: 1.5;
	}
    .page-project #contentsList li{
		width: 48%;
        margin: 1%;
        padding-bottom: 40px;
    }
	.page-project #contentsList{
        margin: 2%;
	}
	.page-project #contentsList a {
    width: auto;
    position: relative;
    display: block;
    background-size: cover;
    overflow: hidden;
    height: inherit;
  }
 .page-project #contentsList a div {
    padding: 40px 3% 50px 3%;
    display: block;
    position: relative;
    width: 48%;
    height: 175px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
	    font-size: 15px;
  }
 .page-project .contentNavi li {
    width: 50%;
  }
 .page-project .contentNavi li a {
    height: auto;
  }
}
@media screen and (max-width:640px) {
 .page-project #contentsList a div {
    font-size: 14px;
    line-height: 1.3;
  }
 .page-project #contentsList li {
    font-size: 13px;
  }
}

@media screen and (max-width: 480px){
  .page-project #contentsList li {
    margin: 0;
    width: 100%;
  }
 .page-project #contentsList a div {

    width: 45%;
    padding: 15% 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .page-project #contentsList a {
    padding-bottom: 0;
    height: 170px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
}