@charset "utf-8";

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

	PRODUCT

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

/*----------------------------------------------------------------------------------------------
	title
----------------------------------------------------------------------------------------------*/
#titleBlock { background:url(../../product/img/title_img.jpg) no-repeat top center; background-size:cover; }

/*----------------------------------------------------------------------------------------------
	製品紹介
----------------------------------------------------------------------------------------------*/
#productBlock { padding:110px 0 10px 0; background:#f0f0f0; }

.box_list { overflow:hidden; margin-bottom:170px; }
.box_list li { position:relative; float:left; width:calc((100% - 56px)/3); margin:0 27px 28px 0; text-align:left; cursor:pointer; }
.box_list li:nth-child(3n) { margin-right:0; }
.box_list li img { width:100%; }

.box_list li::before,
.box_list li div { display:none; }

.box_list li.active::before { display:block; position:absolute; content:''; top:0; left:0; width:100%; height:100%; 
	background:url(../img/bg_blue.png); opacity:0.5; }
.box_list li.active div { display:block; position:absolute; top:10px; left:10px; width:calc(100% - 40px); height:calc(100% - 40px); 
	background:rgba(255,255,255,0.8); padding:10px; }
.box_list .name { font-size:18px; font-weight:bold; color:#0546a0; margin:20px 20px 10px 20px; }
.box_list .explanation { font-size:14px; margin:0 20px; }




/*--------------------------------------------------------------
	SP　表示領域が1076px以下
--------------------------------------------------------------*/
@media (max-width:1076px) {

		/*----------------------------------------------------------------------------------------------
			title
		----------------------------------------------------------------------------------------------*/
		#titleBlock { background:url(../../product/img/sp_title_img.jpg) no-repeat top center; background-size:cover; }

		/*----------------------------------------------------------------------------------------------
			製品紹介
		----------------------------------------------------------------------------------------------*/
		#productBlock { padding:60px 0 10px 0; }

		.box_list { margin-bottom:80px; }
		.box_list li { float:none; width:100%; margin:0 0 15px 0; cursor:default; background:#0546a0; }
		.box_list li:nth-child(3n) { }
		.box_list li img { }
		.box_list li > img { display:none; }

		.box_list li::before { }
		.box_list li div { display:block; }

		.box_list li.active::before { }
		.box_list li.active div { }
		.box_list .name { font-size:14px; font-weight:bold; color:#fff; }
		.box_list .explanation { color:#fff; margin:0 20px; padding-bottom:20px; }




}