/***************************

センターエリア

****************************/
#WorksMainArea{
	margin:0 auto;
/*	width:700px;*/
/*	height:450px;
*/	
/*	height:360px;*/
	width:880px;
	height:auto;
	overflow: hidden;
/*	background-color:green;
*/}

.KeyVisualSize{
	width:880px;
}

/* media banner area */
#media_area{
	margin:0 auto;
	width:700px;
	height:auto;
	margin-top:20px;
	overflow: hidden;
	text-align: center;
	background-color:#e3e3e3;	
	
	display: flex;
	justify-content: center;
	align-items: center;

}

.ReadPC{
	visibility:visible;
}

.Readtablet{
	display:none;	
}

.ReadSP{
	display:none;
}

/****************************

レスポンシブタブレット

****************************/
@media screen and (min-width: 768px) and (max-width: 1023px){
	#WorksMainArea{
		margin:0 auto;
/*		width:700px;	*/
/*		height:450px;	*/	
/*		height:360px;	*/
		text-align: center;
    	width: auto;		
		height:auto;
		margin-top:40px;
		overflow: hidden;
	}
	
/*
	.KeyVisualSize{
		width:700px;
	}
*/

	.ReadPC{
		display:none;
	}

	.Readtablet{
		display:block;		
		visibility:visible;
	}

	.ReadSP{
		display:none;
	}	
	
}



/****************************

レスポンシブスマホ

****************************/
@media screen and (max-width: 767px) {
	#WorksMainArea{
		margin:0 auto;
		width:100%;
		height:100%;
		margin-top:30px;
		text-align:center;
		overflow: hidden;
	}
	
	.KeyVisualSize{
		width:100%;
	}

	#media_area{
		margin:0 auto;
		width:100%;
		height:100%;
		text-align:center;
		overflow: hidden;
		background-color:#e3e3e3;
		
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.ReadPC{
		display:none;
	}

	.Readtablet{
		display:none;	
	}	
	
	.ReadSP{
		display:block;
		visibility:visible;
	}

}