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

.project_main{
	width: 80%;
	margin: 20px auto 120px;	
}

.project_main_ttl{
	font-size:1.3rem; 
	color: #3d69f1;
	padding: 2px 40px;
	width: 60%;
	background: -moz-linear-gradient(left, #c6d3fb, #FFF);
	background: -webkit-linear-gradient(left, #c6d3fb, #FFF);
	background: linear-gradient(to right, #c6d3fb, #FFF);
}
.top_area{
	width: 90%;
	padding: 40px 5% 0;
	font-size: 1.1rem;
	color: #898989;
	margin: 0 30% 30px 0;
}

.main_photo{
	width: 100%;
	margin: 20px auto;
	position: relative;
	z-index: 1;
}
.sub_photo_area{
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.sub_photo{
	width: 48%;
}
.main_photo_item{
	width: 100%;
}
.main_photo img{
	border:1px solid #727272;
}
.sub_photo img{
	border:1px solid #727272;
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
.project_main{
	width: 90%;
	margin: 20px auto 80px;	
}

.project_main_ttl{
	font-size:1.2rem; 
	padding: 2px 30px;
	width: 80%;

}
.top_area{
	width: 93%;
	padding: 40px 2% 0 5%;
	font-size: 1.1rem;
	color: #898989;
	margin: 0 30% 30px 0;
}
.main_photo{
	padding-top: 60px;
}


}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.project_main{
	width: 90%;
	margin: 10px auto 40px;	
}

.project_main_ttl{
	font-size:1.1rem; 
	padding: 2px 20px;
	width: 100%;
	}
.top_area{
	width: 100%;
	padding: 10px 0 0 0;
	font-size: 1.0rem;
	color: #898989;
	margin: 0 30% 30px 0;
}


.main_photo{
	width: 90%;
	margin: 20px auto;
	position: relative;
	padding-top: 0;
	z-index: 1;
}
.sub_photo{
	width: 70%;
	position:relative;
	margin: 30px 0 0 0;
	top: 0;
	right: 0;
	z-index: 2;
}
.main_photo_item{
	width: 100%;
}
.main_photo img{
	border:1px solid #727272;
}
.sub_photo img{
	border:1px solid #727272;
}
.sub_photo_area{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sub_photo{
	width: 100%;
}
}