@charset "UTF-8";

/* .inner 
------------------------------------------------- */
.inner{
	margin:0 auto;
	max-width:1130px;
	width:91%;
	position: relative;
    margin-top: 50px;
}


/*****************************************************
　お客様の声　
*****************************************************/

.archive .customer-review-box2 {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
    margin: auto;
}

.archive .customer-review-box2 .box-item {
    width: 49%;
    padding: 15px;
    margin: 0 0.5% 1em;
}

@media screen and (min-width: 768px) {
.archive .customer-review-box2 {
	margin-top: 20px;
}

.archive .customer-review-box2 .box-item {
    width: 24%;
}
}



/*****************************************************
　スライダー　
*****************************************************/
#main-visual{
	margin:0 0 50px;
}
#main-visual img.sp{
	display:none;
}
#main-visual .slick-prev:before,
#main-visual .slick-next:before{
	display:none;
}
#main-visual .slick-prev,
#main-visual .slick-next{
	height:54px;
	width:32px;
	z-index:1;
}
#main-visual .slick-prev{
	background:url('../images/top/prev_arrow.png') no-repeat center center;
	background-size:contain;
	left:0;
}
#main-visual .slick-next{
	background:url('../images/top/next_arrow.png') no-repeat center center;
	background-size:contain;
	right:0;
}





/*****************************************************
　リフォーム事例　
*****************************************************/
#works{
	margin:0 0 75px;
}
/* 見出し 
------------------------------------------------- */
#works .heading-basic{
	line-height:1.2;
}

.staffList-item{
	width:40%;
}

#works .bl{
margin-top:20px;
}

#works .heading-basic br{
	display:none;
}
#works .hb-num{
	color:#ff7b2c;
	font-size:2em;
	font-style:italic;
	letter-spacing:0.055em;
}
#works .heading-basic:before{
	top:calc(50% + 0.4em);
}
/* スライダー 
------------------------------------------------- */
.works-list_wrap{
	margin:30px 0 20px;
}
.works-list{
	margin:0 auto;
	max-width:984px;
	width:100%;
}
.works-list .works-item{
	margin:0 9px;
	max-width:237px;
}
.works-list .works-item .ttl{
	font-size:1em;
	letter-spacing:0.1em;
	line-height:1.2;
	margin:10px 0;
	text-align:center;
}
.works-list .works-item a{
	color:#212121;
}
.works-list .works-item a .ttl{
	text-decoration:underline;
}
.works-list .works-item .category{
	font-weight:bold;
	letter-spacing:0.1em;
}
.works-list .works-item .price-cp{
	align-items:flex-end;
	display:flex;
	margin:-10px 0 0;
}
.works-list .works-item .price-cp .price{
	font-weight:bold;
	margin:0 0.5em 0 0;
}
.works-list .works-item .price-cp .price .large{
	color:#f10013;
	font-size:3em;
	font-style:italic;
}
.works-list .works-item .price-cp .price .small{
	color:#f10013;
	font-size:2.6em;
	font-style:italic;
	margin:0 0.1em 0 0;
}
.works-list .works-item .price-cp .cp{
	font-weight:bold;
	margin:0 0 5px;
	width: 45%;
}
/* ----- slick ----- */
.works-list .slick-prev:before,
.works-list .slick-next:before{
	display:none;
}
.works-list .slick-prev,
.works-list .slick-next{
	height:80px;
	width:47px;
	z-index:0;
}
.works-list .slick-prev{
	background:url('../images/top/prev_arrow.png') no-repeat center center;
	background-size:contain;
	left:-60px;
}
.works-list .slick-next{
	background:url('../images/top/next_arrow.png') no-repeat center center;
	background-size:contain;
	right:-60px;
}

.notis{
	text-align:center;
}


/* イチオシ　施工、お客様の声　見出し 
------------------------------------------------- */


.section-ttl2:before {
    margin: 0 50px 0 0;
}

.section-ttl2 span {
    display: inline-block;
}

.section-ttl2:before, .section-ttl2:after {
    border-top: 2px solid #22a9e7;
    content: '';
    flex-grow: 1;
    display: block;
}

.section-ttl2:after {
    margin: 0 0 0 50px;
}

.section-ttl2 {
    align-items: center;
    color: #22a9e7;
    display: flex;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
	width: 88%;
    margin: auto;
}

.section-ttl2 span {
    background: url(../images/page-pack/toilet/works_ttl_bg.png) no-repeat left center;
    line-height: 61px;
    padding: 0 0 0 78px;
}

/* お客様の声　見出し  */

.section-ttl3:before {
    margin: 0 50px 0 0;
}

.section-ttl3 span {
    display: inline-block;
}

.section-ttl3:before, .section-ttl3:after {
    border-top: 2px solid #22a9e7;
    content: '';
    flex-grow: 1;
    display: block;
}

.section-ttl3:after {
    margin: 0 0 0 50px;
}

.section-ttl3 {
    align-items: center;
    color: #22a9e7;
    display: flex;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
	width: 88%;
    margin: auto;
}

.section-ttl3 span {
    background: url(../images/page-pack/toilet/voice_ttl_bg.png) no-repeat left center;
    line-height: 61px;
    padding: 0 0 0 78px;
}

@media screen and (max-width: 767px) {
    .section-ttl2 {
        margin: 0 0 4.5vw;
		font-size: 6.5vw;
		width: 99%;
    }
	
	.section-ttl3 {
        margin: 0 0 4.5vw;
		font-size: 6.5vw;
		width: 99%;
    }
		
	.section-ttl2 span {
   background-size: contain;
   line-height: 9.75vw;
   padding: 0 0 0 10.5vw;
    }
	
	.section-ttl3 span {
   background-size: contain;
   line-height: 9.75vw;
   padding: 0 0 0 10.5vw;
    }
	
	.section-ttl2:before {
        margin: 0 3.75vw 0 0;
    }
	
	.section-ttl3:before {
        margin: 0 3.75vw 0 0;
    }
	
	.section-ttl2:after {
    margin: 0 0 0 3.75vw;
    }
	
	.section-ttl3:after {
    margin: 0 0 0 3.75vw;
    }
	
}


@media screen and (max-width:1024px){
	/*****************************************************
	　共通　
	*****************************************************/
	/* 見出し 
	------------------------------------------------- */
	.heading-basic{
		border-bottom:3px solid #ff7b2c;
		font-size:4.61vw;
		padding:0 8.97vw 1.53vw;
	}
	.heading-basic:before{
		height:6.41vw;
		left:0;
		width:6.41vw;
	}


	/*****************************************************
	　バナー　
	*****************************************************/
	.top-banner{
		margin:0 0 2.56vw;
	}
	.top-banner .inner{
		width:auto;
	}
	.top-banner img.pc{
		display:none;
	}
	.top-banner img.sp{
		display:block;
	}


	/*****************************************************
	　スライダー　
	*****************************************************/
	#main-visual{
		margin:0 0 6.41vw;
	}
	#main-visual img.sp{
		display:block;
	}
	#main-visual img.pc{
		display:none;
	}
	#main-visual .inner{
		width:auto;
	}
	#main-visual .inner .slick-slider{
		margin:0;
	}
	#main-visual .slick-prev,
	#main-visual .slick-next{
		height:6.92vw;
		width:4.1vw;
	}