@charset "utf-8";
/*----------------------------------------------------------------------------------------------------------
	スマホ用（～768px）
------------------------------------------------------------------------------------------------------------*/
/*新築＆お客様の声TOP（SP）**********/
ul.ul_worksTop01 li{
	float: left;
	width: 48.5%;
	margin: 0 3% 1.5rem 0;
	font-size: 0.88rem;
	line-height: 150%;
}
ul.ul_worksTop01 li:nth-child(2n)	{margin: 0 0 1.5rem 0;}
ul.ul_worksTop01 li:nth-child(2n+1)	{clear: both;}
ul.ul_worksTop01 li a		{color: rgba(0,0,0,0.90);}
ul.ul_worksTop01 li a:hover	{color: rgba(0,0,0,0.50);}
ul.ul_worksTop01 li img		{margin-bottom: 0.25rem;}
ul.ul_worksTop01 li a .new{
	background: #799f8c;
	color: #fff;
	padding: 1px 4px;
	font-size: 0.69rem;
}
/*リフォームTOP（SP）**********/
#area_reform{
	width:100%;
	margin: 0 auto 2rem auto;
}
#area_reform #area_reform_all{
	background: url(../image/common/bg_stripe01.png) repeat 0 0;
	background-size: 40px;
	padding: 1.5rem 0;
}
#area_reform #area_reform_part{
	background: url(../image/common/bg_dot01.png) repeat 0 0;
	background-size: 34px;
	padding: 1.5rem 0;
}
#area_reform .inner{
	width: 90%;
	max-width: 600px;
}
h3.h3_reform01{
	width: 80%;
	max-width: 350px;
	margin: 0 auto 1.5rem auto;
}
ul.ul_reformTop01 li{
	float: left;
	width: 47%;
	margin: 0 6% 1rem 0;
	text-align: center;
}
ul.ul_reformTop01 li:nth-child(2n)	{margin: 0 0 1rem 0;}
ul.ul_reformTop01 li:nth-child(2n+1){clear: both;}
ul.ul_reformTop01 li img{
	background: #fff;
	padding: 5px;
	margin-bottom: 3px;
}
ul.ul_reformTop01 li a .title{
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: 500;
	background: url(../image/common/icn_arrow01.png) no-repeat 100% 50%;
	background-size: 5px;
	color: rgba(0,0,0,0.90);
	padding: 0 9px 0 5px;
}
ul.ul_reformTop01 li a:hover .title{
	background: url(../image/common/icn_arrow01_gry.png)no-repeat 100% 50%;
	background-size: 5px;
	color: rgba(0,0,0,0.50);
}
#slide_reform01{
	padding: 0.4rem 0 1rem 0;
}
/*新築・下層（SP）**********/
article.article_works01{padding: 1.5rem 0 3.25rem 0;}
section.section_works01{padding: 0;}

#slide_works01{
	margin: 0 0 1.5rem 0;
	background: #fff;
	box-sizing: border-box;
	padding: 7px 7px 14px 7px;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.25);
}
.slick_slider04 img{
	margin: 0 0 4px 0;
}
.slick_slider04 p.caption{
	margin: 0 0 4px 0;
	padding: 0 4px;
	font-size: 0.88rem;
	line-height: 150%;
	text-align: center;
}
.slick_slider04.prev_arrow{
	position: absolute;
	background:/* rgba(0,0,0,0.70)*/ url(../image/common/icn_arrow05_01.png) no-repeat 50% 50%;
	background-size: 14px;
	z-index: 2;
	left: 0;
	top: 0;
	width: 20px;
	height: 90%;
}
.slick_slider04.next_arrow{
	position: absolute;
	background: url(../image/common/icn_arrow05_02.png) no-repeat 50% 50%;
	background-size: 14px;
	z-index: 2;
	right: 0;
	top: 0;
	width: 20px;
	height: 90%;
}
.slick_slider04.slick-dotted.slick-slider {
	margin-bottom: 0;
}
.slick_slider04 .slick-dots{
	position: static;
	bottom: 0;
}
#area_worksData01{
	margin: 0 0 2rem 0;
	padding: 0 7px;
}
table.table_works01{
	width: 100%;
	margin: 1rem 0;
}
table.table_works01 th,
table.table_works01 td{
	border-bottom: 1px solid rgba(0,0,0,0.20);
	line-height: 150%;
	padding: 8px 2px;
	font-weight: normal;
}
table.table_works01 th{
	width: 90px;
}
#area_worksData02{
	margin: 0 0 2rem 0;
	padding: 0 7px;
}
#area_bestshot01,
#area_bestshot02{
	position: relative;
	width: 100%;
	padding: 0 0 2rem 0;
}
#area_bestshot01 .title,
#area_bestshot02 .title{
	position: absolute;
	width: 200px;
	top: -10px;
	left:10px;
}
#area_bestshot01 .photo,
#area_bestshot02 .photo{
	margin: 0 auto;
	padding: 15px 0 0.25rem 0;
	width: 90%;
}
#area_bestshot01 .text,
#area_bestshot02 .text{
	margin: 0 auto;
	width: 90%;
}
/*リフォーム・下層（SP）**********/
.box_reform_all02t{
	box-sizing: border-box;
	background: url(../image/works/reform/all_02_t/bg_reform_all02t.png) repeat 0 0;
	width: 100%;
	max-width: 840px;
	margin: 0 auto 2rem auto;
	padding: 1rem 1rem;
}
.box_reform_all02t p img{
	display: block;
	margin: 0 auto;
	max-width: 710px;
}



/*-------------------------------------------------------------------------------------------------------------------------------
	タブレット用（768px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px){

/*新築＆お客様の声TOP（タブ）**********/
ul.ul_worksTop01 li{
	width: 32%;
	float: left;
	margin: 0 2% 1.5rem 0;
}
ul.ul_worksTop01 li:nth-child(2n)	{margin: 0 2% 1.5rem 0;}
ul.ul_worksTop01 li:nth-child(2n+1)	{clear: none;}
ul.ul_worksTop01 li:nth-child(3n)	{margin: 0 0 1.5rem 0;}
ul.ul_worksTop01 li:nth-child(3n+1)	{clear: both;}

/*リフォームTOP（タブ）**********/
#area_reform{
	max-width: 1500px;
	margin: 0 auto 3rem auto;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
#area_reform #area_reform_all{
	width: 50%;
	position: relative;
	background-image: url(../image/common/img_mountain01.png), url(../image/common/bg_stripe01.png);
	background-repeat: no-repeat, repeat;
	background-size: 308px, 40px;
	background-position: left 5% bottom 36px, 0% 0%;
}
#area_reform #area_reform_part{
	width: 50%;
	position: relative;
}
/*新築・下層（タブ）**********/
article.article_works01{
	padding: 4rem 0 0rem 0;
}
#slide_works01{
	width: 90%;
	margin: 0 auto 3rem auto;
}
#area_bestshot01{
	padding: 1rem 0 2rem 0;
}
#area_bestshot01 .inner{
	position: static;
}
#area_bestshot01 .title{
	position: static;
	width: 34%;
	float: left;
}
#area_bestshot01 .title img{
	width: 100%;
	max-width: 287px;
	margin: 0 0 1rem 0;
}
#area_bestshot01 .photo{
	margin: 0 0 0 0;
	padding: 0;
	width: 62%;
	float: right;
}
#area_bestshot01 .text{
	margin: 0;
	width: 34%;
	float: left;
}
/********/
}






/*-------------------------------------------------------------------------------------------------------------------------------
	PC用（1000px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1000px){

/*新築＆お客様の声TOP（PC）**********/
ul.ul_worksTop01 li{
	width: 23%;
	margin: 0 2.66% 2rem 0;
}
ul.ul_worksTop01 li:nth-child(2n)	{margin: 0 2.66% 2rem 0;}
ul.ul_worksTop01 li:nth-child(3n)	{margin: 0 2.66% 2rem 0;}
ul.ul_worksTop01 li:nth-child(3n+1)	{clear: none;}
ul.ul_worksTop01 li:nth-child(4n)	{margin: 0 0 2rem 0;}
ul.ul_worksTop01 li:nth-child(4n+1)	{clear: both;}
ul.ul_worksTop01 li:nth-child(4n+1)	{clear: both;}

/*リフォームTOP（PC）**********/
#area_reform	{margin: 0 auto 4rem auto;}
h3.h3_reform01	{margin: 0 auto 2rem auto;}

/*新築・下層（PC）**********/
#slide_works01{
	width: 62%;
	max-width: 800px;
	float: left;
	margin: 0 0 4rem 0;
}
.slick_slider04.prev_arrow{
	height: 94%;
}
.slick_slider04.next_arrow{
	height: 94%;
}
#area_worksData01{
	width: 34%;
	float: right;
	margin: 0 0 4rem 0;
	padding: 0;
}
#slide_works01		{margin: 0 0 4rem 0;}
#area_worksData01	{margin: 0 0 4rem 0;}
#area_bestshot01{
	background: url(../image/common/img_house02.png) no-repeat left 5% bottom 2rem;
	background-size: 335px;
	padding: 1.5rem 0 3rem 0;
}
#area_bestshot01 .title{width: 40%;}
#area_bestshot01 .photo{width: 55%;}
#area_bestshot01 .text{width: 40%;}


#area_worksData02{
	width: 55%;
	float: left;
	padding: 0 0 3rem 0;
}
#area_bestshot02{
	width: 40%;
	float: right;
	padding: 0 0 3rem 0;
}
#area_bestshot02 .title{
	width: 200px;
	top: -25px;
	left:-25px;
}
#area_bestshot02 .photo{
	margin: 0;
	padding: 0 0 0.25rem 0;;
	width: 100%;
}
#area_bestshot02 .text{
	margin: 0;
	width: 100%;
}
/********/
}