@charset "utf-8";
/* --------------------------------------------

リフォーム事例

---------------------------------------------- */ 

 #reform .main-head {
	padding: 63px 0 95px;
	background: url(../img/main_head_back.jpg)top center no-repeat;
	background-size: cover;
}


/*	リフォーム	----------------------------------------------*/ 

.category { max-width: 1300px; width: 90%; margin: 12em auto 10em; text-align: center; position: relative;}
.categoryBox { position: relative; border-right: solid 1px #000 9; max-width: 315px;  width: 21.5%; margin: 0 1.35% 3.5em ; padding-top: 2.5em;  display: inline-block; vertical-align: top; }
.categoryBox img { width: 99%; }
.categoryBox p { width: 100%; padding: .5em 2em 2em; }
.categoryBox::after { position: absolute; display: block; content: ""; background: #000; width: 90%; height: 1px; top:-.5em; left :15px;}
.categoryBox::before { position: absolute; display: block; content: ""; background: #000 left; width: 1px; height: 21em; left:-20px; }
.categoryBox--hide::before { display: none;}

/* border top hide */
.category::before { display: block; content: ""; background: #fff top center; width: 100%; height: 1em; top:-1em; position: absolute; z-index: 1000;}


/*	TOTO	----------------------------------------------*/ 

.remodel { margin: 0 auto; width: 100%; display: block; content: ""; background: url(../img/reformback.jpg)no-repeat top; background-size: auto 27em ;}

.remodel__01 { max-width: 1024px; width: 90%; margin: 0 auto; padding-top: 6.8em;}
.remodel__01__img { display: inline-block; max-width: 200px; width: 20%;}
.remodel__01__img img { width: 100%; }
.remodel__01__text { display: inline-block; vertical-align: top; width: 70%; margin-left: 40px; padding-top: 1.5em;}
.remodel__01__text img { max-width: 600px; width: 100%; margin-bottom: 1.5em;}
.remodel__01__text p { padding-left: 40px;}

.remodel__02 { max-width: 1024px; width: 90%; margin: 13.5em auto 0;  text-align: center; }
.remodel__02 img { width: 100%;}
.remodel__02__h2 { width: 100%; margin-bottom: 6em;}
.remodel__02__img { display: inline-block; }
.remodel__02__img:nth-child(odd) { margin: 0 7%;}

.remodel__03 { max-width: 700px; width: 90%; margin: 10em auto; transition: 0.3s ; }
.remodel__03 img { width: 100%; transition: 0.3s ;}
.remodel__03 a { display: block; transition: 0.3s ;}
.remodel__03 img:hover {  opacity: 0.8;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  transition: 0.3s ;
	}
	
	 

/*.remodel__03 p { text-align: center; font-size: 12px; font-size: 1.2rem; padding-top: 1em; position: relative;}
.remodel__03 p::before { position: absolute; display: block; content: ""; width: 48px; height: 1.5em; left: 0; bottom: 0; background: url(../img/pl.png)no-repeat; background-size: contain;}
.remodel__03 p::after { position: absolute; display: block; content: ""; width: 48px; height: 1.5em; right: 0; bottom: 0;background: url(../img/pr.png)no-repeat; background-size: contain;}*/




/*	事例	---------------------------------------------- */ 

.reworrks { max-width: 1070px; width: 90%; margin: 35em auto 8em; display: block; position: relative;}
.reworrks::before { display: block; content: ""; position: absolute; width: 30px; padding: 7em 0; background: url(../img/reworks_title.png)no-repeat center;  top:-21em; right: 50%; } 

.worksBox__inner { max-width: 320px; width: 30%; height: auto; display: inline-block; margin-bottom: 3.5em; margin-right: 4%; vertical-align: top; }
.worksBox__inner:nth-of-type(3n) { margin-right: 0;}
.worksBox__inner__photo { }
.worksBox__inner__photo img { width: 100%; height: auto; transition: .3s;}

/*.texttitle { border-bottom: solid 1px; padding-top: .8em;}
.worksBox__inner__text { width: 100%; margin-bottom: 3em;}
.worksBox__inner__text b { font-size: 16px; font-size: 1.6rem; font-weight: 500; line-height: 2.5; vertical-align: middle;}
.worksBox__inner__text span { font-size: 12px; font-size: 1.2rem; color: #a78f72; margin-right: 4%; }
.worksBox__inner__text p { line-height: 1.5; padding-top: 0.8em; font-size: 13px; font-size: 1.3rem; }*/

.texttitle { padding-top: 1em;}
.worksBox__inner__text { width: 100%; margin-bottom: 3em; max-width: 200px; display: none; }
.worksBox__inner__text b { font-size: 15px; font-size: 1.5rem; font-weight: 400; line-height: 0; vertical-align: middle;  }
.worksBox__inner__text span { font-size: 12px; font-size: 1.2rem; color: #a78f72; margin-right: 4%; }
.worksBox__inner__text p { line-height: 1.5; padding-top: 0.8em; font-size: 13px; font-size: 1.3rem; display: none;}


/*ポップアップ用スタイル*/
.mfp-detail__inner {
	width: 90%; max-width: 891px;
	margin: 0 auto;
}

.mfp-detail__item {
}
.mfp-detail__item:nth-of-type(2) {
	margin: 123px 0;
}

.mfp-detail__item .mfp-detail__photo {
	width: 53.423%; max-width: 476px;
	box-sizing: border-box;
}
.mfp-detail__item .mfp-detail__photo img {
	display: block;
	width: 100%;
}

.mfp-detail__item .mfp-detail__photo-left {
	float: left;
	/*float: left;*/
}

.mfp-detail__item .mfp-detail__photo-right {
	float: right;
}

.mfp-detail__item .mfp-detail__textbox {
	position: relative;
	box-sizing: border-box;
	width: 41.3%; max-width: 368px;
	padding-top: 115px;
}
.mfp-detail__item .mfp-detail__textbox-left {
	float: left;
}
.mfp-detail__item .mfp-detail__textbox-right {
	float: right;
	/*float: right;*/
}

.mfp-detail__textbox-left .mfp-detail__head {
	position: absolute; top: 46px; left: 0;
	width: 457px;
}
.mfp-detail__textbox-right .mfp-detail__head {
	position: absolute; top: 46px; left: -89px;
	/*position: absolute; top: 46px; left: 0px;*/
	width: 457px;
}

.mfp-detail__textbox .mfp-detail__head img {
	display: block;
	width: 100%;
}

.mfp-detail__textbox .mfp-detail__text {
	line-height: 1.7;
	color: #fff;
	display: none;
}


@media screen and (max-width:1024px){
.mfp-detail__inner {
	max-width: 476px;
	margin: 0 auto;
}

.mfp-detail__item .mfp-detail__photo-left,
.mfp-detail__item .mfp-detail__photo-right {
	float: none;
}
.mfp-detail__item .mfp-detail__photo {
	width: 100%; max-width: 476px;
	margin: 0 auto;
}
.mfp-detail__item .mfp-detail__textbox {
	width: 100%; max-width: 476px;
	padding-top: 115px;
}
.mfp-detail__item .mfp-detail__textbox-left,
.mfp-detail__item .mfp-detail__textbox-right {
	float: none;
}
.mfp-detail__textbox-left .mfp-detail__head,
.mfp-detail__textbox-right .mfp-detail__head {
	position: absolute; top: 46px; left: 0;
	width: 100%;
}

}