@charset "utf-8";
/*.drawer-nav{
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
}
.contact_chat{
	display: none;
}*/
.top{
	 margin: -110px auto 0;
	}
.project{
	width: 100%;
	margin: 110px auto 0;

	background: linear-gradient(to right, #336eaa,#44ae97);
}
.project_wrap{
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 60px;
}
.project_box{
	width: 348px;
	position: relative;
	cursor: pointer;
	margin-right: auto;
	margin-left: auto;
	display: block;
	overflow-y: hidden;
	margin-bottom: 30px;
}
.project_box:after {
	content: '';
	display: inline-block;
	width: 100%;/*画像の幅*/
	height: 522px;/*画像の高さ*/
	background-image: url("");
	vertical-align: middle;
	position: absolute;
	top: 0px;
	left: 0px;
}
.project_box:hover:after {
	background-color: rgba(0,0,0,0.5);
	background-image: url(../images/project/png_02.png);
	background-repeat: no-repeat;
	background-position: center 200px;
	font-size: 1.3rem;
	line-height: 560px;
	position: absolute;
	content: "動画を再生";
	letter-spacing: .1em;
	text-align: center;
	color: #ffffff;
	opacity: 1;
}
.oj_tx{
	position: absolute;
	width: 100%;
	height: auto;
	color: #ffffff;
	bottom: 0;
	left: 0;
	padding: 0 0 30px 0px;
	text-align: center;font-weight: bold;
}
.project_box:hover{
    opacity: 1;
}










@media (min-width:641px){
	.project a:hover{
		opacity: 1;
	}
.top{
	 margin: -80px auto 0;
	}
.project{
	width: 100%;
	margin: 80px auto 0;
	height: calc(100vh - 80px - 156px);
	min-height: 650px;
}
.project_wrap{
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
	
#contact_layer{
	bottom:0px;	
}
.project_box{
	padding-top: 10%;
	width: 35vh;
	max-width: 350px;
	min-width: 300px;
}
	.project_box:after {
	height: 100%;/*画像の高さ*/
	top: 6%;
	opacity: 1;
	max-width: 470px;
}
	.project_box:hoer{
		opacity: 1;
	}

}