@charset "utf-8";

/* ---------------------------------------------------------
    建築部材・ルーバー
   ---------------------------------------------------------*/

/* louverBox01 */

.louverBox01{
	font-size:inherit;
	text-align:left;
	margin-bottom:100px;
}

.louverBox01 .imgTop{
	text-align: center;
	margin-bottom: 50px;
}

.louverBox01 .imgTop img{
	width: 100%;
	max-width: 716px;
}

/* 547px:330px */
.louverBox01 .imgLeft{
	float:left;
	width: 62.4%;
	box-sizing: border-box;
	padding-right: 20px;
}

.louverBox01 .imgRight{
	float:right;
	margin-top: 14%;
	width: 37.6%;
	text-align: right;
}

.louverBox01 .imgLeft img{
	width:100%;
	max-width:547px;
}

.louverBox01 .imgRight img{
	width:100%;
	max-width:330px;
}

.louverBox01 ul{
	font-size:0;
	text-align:center;
}

.louverBox01 ul li{
	display:inline-block;
	font-size:14px;
	font-weight:bold;
	margin:0;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 18%;
	max-width: inherit;
    vertical-align: top;
/*
	margin-right: 2%;
	width: 18.4%;
*/
}

.louverBox01 ul li:nth-child(5){
	margin-right:0;
}

.louverBox01 ul li img{
	display:block;
	margin-bottom: 10px;
/*
	width: 100%;
	max-width: 175px;
*/
}


.productMainTitle01.louverTitle01{
	width: 100%;
	border:none;
	position:relative;
}

.productMainTitle01.louverTitle01:after{
	content: "";
	position: absolute;
	width: 200px;
	border-bottom: 6px solid #D99026;
	bottom: -7px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.louverBox02{
	text-align: center;
	margin-bottom: 100px;
}

.louverBox02 .imgBox{
	margin-bottom: 30px;
}

.louverBox02 .imgBox img{
	width: 100%;
	max-width: 715px;
	vertical-align: bottom;
}

.louverBox02 .imgBox2{
	font-size:0;
}

.louverBox02 .imgBox2 .spBox{
	display: inline-block;
	font-size: 16px;
	margin: 0 1%;
}

.louverBox02 .imgBox2 img{
	width: 100%;
	max-width: 175px;
}

.louverBox02 .imgBox2 p{
	font-weight: bold;
}


@media screen and (max-width: 750px){

	/* ---------------------------------------------------------
	    建築部材・ルーバー
	   ---------------------------------------------------------*/

	/* louverBox01 */

	.louverBox01 .imgRight,
	.louverBox01 .imgLeft{
		float: none;
		width: 100%;
		margin-top: 50px;
		text-align: center;
		padding: 0;
	}

	.louverBox01 .imgRight{
		padding: 0 20%;
		box-sizing: border-box;
	}

	.louverBox01 .imgLeft{
		box-sizing: border-box;
		padding-right: 7%;
	}

	.louverBox01 ul.parts_list li{
		margin: 0 2.5% 5% 2.5%!important;
		width: 45%;
		max-width: 175px;
	}

	.louverBox01 ul.parts_list li img{
		width:100%;
	}

	/* louverBox02 */

	.louverBox02 .imgBox{
		display: block;
		margin: 0 0 15px 0;
	}

	.louverBox02 .imgBox2{
		display: block;
	}

	.louverBox02 .imgBox2 .spBox{
		display: inline-block;
		width: 49%;
		min-width: 200px;
	}

}


/* ----------------
slide 2018.06追加
-------------------*/
.panelBox {
    margin-bottom: 100px;
}
.slideComBox{
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.slideComBox .bx-wrapper {
    -webkit-box-shadow: none;
    border: none;
    background: none;
    margin-bottom: 0;
}

.slideComBox .bx-wrapper img{
    vertical-align:bottom;
    width:100%;
}

.slideComBox .slideBox01Inner {
    /* height: 600px; */
    display: table-cell;
    vertical-align: middle;
}

.slideComBox .prevBtn .bx-prev,
.slideComBox .nextBtn .bx-next {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #333;
    top: 50%;
    margin-top: -18px;
}

.slideComBox .prevBtn .bx-prev:after,
.slideComBox .nextBtn .bx-next:after {
    content: "";
    position: absolute;
    top: 11px;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 4px solid #FFF;
    border-right: 4px solid #FFF;
}

.slideComBox .nextBtn .bx-next {
    right: 0;
}

.slideComBox .prevBtn .bx-prev {
    left: 0;
}

.slideComBox .nextBtn .bx-next:after {
    transform: rotate(45deg);
    right: 14px;
}

.slideComBox .prevBtn .bx-prev:after {
    transform: rotate(225deg);
    left: 13px;
}