@charset "UTF-8";

.category-select-01 li.icon-ch-01 a{ background-color: #e07b04; color: #ffffff;}
.category-select-01 li.icon-ch-02 a{ background-color: #043c5a; color: #ffffff;}
.category-select-01 li.icon-ch-03 a{ background-color: #c6955b; color: #ffffff;}
.category-select-01 li.icon-ch-04 a{ background-color: #d4dbd7; color: #2b2827;}
.category-select-01 li.icon-ch-05 a{ background-color: #4c8076; color: #ffffff;}
.category-select-01 li.renovation_icon a{ background-color: #55433b; color: #ffffff;}

.cate-icon li.hiraya-simple{background-color: #e07b04; color: #ffffff;}
.cate-icon li.hiraya-asian{background-color: #043c5a; color: #ffffff;}
.cate-icon li.hiraya-natural{background-color: #c6955b; color: #ffffff;}
.cate-icon li.two-stories{background-color: #d4dbd7; color: #2b2827;}
.cate-icon li.two-households{background-color: #4c8076; color: #ffffff;}

/* page-works
-------------------------------------*/
@media screen and (min-width:641px) {
	.wysiwyg iframe{
		width: 100%;
		height: 480px;
	margin: 1.5em 0;
	}

	.sy-ttl{
font-size: 14px;
font-weight: 700;
letter-spacing: 1.12px;
line-height: 24px;
	}
	.link-area{
		width: 900px;
		margin: 0 auto;
	}

	#page-works{
		width: 1100px;
		margin: 0 auto;
	}

	.h2-bg { background-image: url(../images/works/h2.jpg); }
	.h3-ptn-01 { margin-bottom: 38px; }

	/* category-select-01
	-------------------------------------*/
	.category-select-01 { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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; margin-bottom: 8px; }

	.category-select-01 .icon-ch-01{}

	.category-select-01 li { width: 160px;
		margin-right: 15px; margin-bottom: 24px; }

	.category-select-01 li a{
		display: block;
		padding: 5px 0 5px 0; border-radius: 2px; /* CSS3草案 */ -webkit-border-radius: 2px; /* Sfari,Google Chrome用 */ -moz-border-radius: 2px; /* Firefox用 */ color: #19100c; font-size: 15px; font-weight: 700; text-align: center; position: relative;
		border-radius: 5px;
	}

	.category-select-01 li.icon-ch-01 a{
		background-color: #e07b04;
		color: #ffffff;
	}



	.category-select-01 li:hover a:hover { text-decoration: none; 
	opacity: 0.8;
	}
	.category-select-01 li:nth-child(5n) { margin-right: 15px; }
	.category-select-01 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-01 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-01 .active-nav:after, .category-select-01 .active-nav:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-01 .active-nav:after { border-color: transparent; border-top-color: #19100c; border-width: 6px; margin-left: -6px; }
	.category-select-01 .active-nav:before { border-color: transparent; border-top-color: #19100c; border-width: 12px; margin-left: -12px; }

	/* works-list
	-------------------------------------*/
	.works-list h5 { padding-left: 6px; padding-right: 6px; color: #665d59; font-size: 14px; font-weight: 400; line-height: 18px; }
	.works-list > ul { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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; margin-bottom: 51px; }
	.works-list > ul > li {  width: 340px;margin-right: 40px; margin-bottom: 48px; }

	.works-list > ul > li a:hover {
		text-decoration: none;
	}
	.works-list > ul > li a:hover .sy-ttl{
	 text-decoration: underline;
	}

	.works-list > ul > li img { margin-bottom: 6px; }
	.works-list > ul > li:nth-child(3n) { margin-right: 0px; }
	.works-list > ul > li .fit {  height: 236px;margin-bottom: 14px; }
	.works-list > ul > li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	.link-area { margin-top: 43px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 64px; }

	.cate-icon {
		display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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;
	}

	.cate-icon.ano{
		display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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;-webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;
	}

.cate-icon li{
width: 120px;
height: 25px;
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
background-color: #e07b04;
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.7px;
line-height: 1;
display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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;
-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}



.h3-Box-01 { margin-bottom: 38px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 3px solid #dddddd; }
.h3-Box-01 h3 { padding-bottom: 8px; color: #2b2827; font-size: 20px; font-weight: 400; }
.h3-Box-01 h3:before { content: "\25A0 \a0"; color: #ea5404; font-size: 16px; }

#sect-01 .h4-ptn-01 {
font-size: 22px;
font-weight: 700;
letter-spacing: 1.1px;
line-height: normal;
margin-bottom: 20px;
}

#sect-01 .main-pic { text-align: center; margin-bottom: 32px; }
#sect-01 .main-pic img { max-width: 100% !important; height: auto !important; }
#sect-01 .wysiwyg { margin-bottom: 55px; }
#sect-02 { margin-top: 45px; margin-bottom: 16px;}
#sect-02 .gallery-list { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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; }
#sect-02 .gallery-list li {  width: 219px;margin-right: 19px; margin-bottom: 20px; }
#sect-02 .gallery-list li .fit { height: 120px; }
#sect-02 .gallery-list li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
#sect-02 .gallery-list li:nth-child(4n) { margin-right: 0px; }
#sect-02 .small { color: #666666; font-size: 13px; font-weight: 400; }
#sect-03 iframe{width: 100%;height: 500px;margin-bottom: 45px;}

.category-select-01.ano{
	margin-top: 40px;
}
	
	/* category-select-02
	-------------------------------------*/
	.category-select-02 { padding-top: 48px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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; }
	.category-select-02 li { width: 130px; padding: 5px 0 5px 0; border: 2px solid #19100c; border-radius: 2px; /* CSS3草案 */ -webkit-border-radius: 2px; /* Sfari,Google Chrome用 */ -moz-border-radius: 2px; /* Firefox用 */ color: #19100c; font-size: 15px; font-weight: 700; text-align: center; margin-right: 15px; margin-bottom: 24px; position: relative; }
	.category-select-02 li:hover { background-color: #19100c; color: #fff; }
	.category-select-02 li:hover a { color: #fff; }
	.category-select-02 li:hover a:hover { text-decoration: none; }
	.category-select-02 li:nth-child(5n) { margin-right: 0px; }
	.category-select-02 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-02 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-02 .active-nav:after, .category-select-02 .active-nav:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-02 .active-nav:after { border-color: transparent; border-bottom-color: #19100c; border-width: 6px; margin-left: -6px; }
	.category-select-02 .active-nav:before { border-color: transparent; border-bottom-color: #19100c; border-width: 12px; margin-left: -12px; }



	.bottom-bd{
		width: 1100px;
		margin: 0 auto;
	}
	.top-bd{
		width: 1100px;
		margin: 0 auto;
	}
	
	#sect-01{
		width: 1100px;
		margin: 0 auto;
		border: 5px solid #eeece7;
	padding: 48px 75px 60px;
	margin-bottom: 32px;
	margin-top: 32px;
	}
	
	.sy-ttl-box{
		margin-bottom: 20px;
		position: relative;
	}
	
	.sy-ttl-box .gallery-txt-001{
		position: absolute;
		top: 0;
		right: 0;
	}
	
	#sect-03 iframe{
	width: 1100px;
	height: 610px;
	margin: 0 auto;
	display: block;
	}


}

/*SP用*/
@media screen and (max-width:640px) {

	.wysiwyg iframe{
		width: 100%;
		height: 45.894vw;
	margin: 1.5em 0;
	}

	.works-list{
		width: 92vw;
		margin: 0 auto;
	}
	.sy-ttl{
font-size: 3.14vw;
font-weight: 700;
letter-spacing: 0.271vw;
line-height: 4.831vw;
	}
	.link-area{
		width: 92vw;
		margin: 0 auto;
	}


	.h2-bg { background-image: url(../images/works/h2.jpg); }
	.h3-ptn-01 { margin-bottom: 9.179vw; }


	/* category-select-01
	-------------------------------------*/
	.category-select-01 {
		width: 92vw;
		margin: 0 auto;
		display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-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;margin-bottom: 1.932vw;justify-content: space-between;}

	.category-select-01 li { width: 48%; text-align: center; margin-bottom: 3.382vw; position: relative; }
	.category-select-01 li a{
		display: block;
		 padding: 5px 1vw; border-radius: 0.483vw; /* CSS3草案 */ -webkit-border-radius: 0.483vw; /* Sfari,Google Chrome用 */ -moz-border-radius: 0.483vw; /* Firefox用 */ color: #19100c; font-size: 3.382vw; font-weight: 700;
	}

	.category-select-01 li:hover { background-color: #19100c; color: #fff; }
	.category-select-01 li:hover a { color: #fff; }
	.category-select-01 li:hover a:hover { text-decoration: none; }
	.category-select-01 li:nth-child(5n) { margin-right: 0px; }


	.category-select-01 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-01 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-01 .active-nav:after, .category-select-01 .active-nav:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-01 .active-nav:after { border-color: transparent; border-top-color: #19100c; border-width: 1.449vw; margin-left: -1.449vw; }
	.category-select-01 .active-nav:before { border-color: transparent; border-top-color: #19100c; border-width: 2.899vw; margin-left: -2.899vw; }

	/* works-list
	-------------------------------------*/
	.works-list h5 { padding-left: 1.449vw; padding-right: 1.449vw; color: #665d59; font-size: 3.382vw; font-weight: 400; line-height: 4.348vw; }
	.works-list > ul { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-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; margin-bottom: 12.319vw; justify-content: space-between; }
	.works-list > ul > li { width: 48%; margin-bottom: 3.14vw; }
	.works-list > ul > li img { margin-bottom: 1.449vw; }
	.works-list > ul > li:nth-child(2n) { margin-right: 0px; }
	.works-list > ul > li .fit { height: 31.884vw; margin-bottom: 1.932vw; }
	.works-list > ul > li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	.link-area {margin-top: 4.831vw;padding: 0 10vw;margin-bottom: 7.246vw;}
	.link-area a { margin-top: 3.623vw; display: block; }

.cate-icon li{
text-align: center;
color: #ffffff;
font-size: 3.14vw;
font-weight: 700;
letter-spacing: 0.169vw;
padding: 0.483vw 0.483vw 0.242vw;
margin-bottom: 1.449vw;
}



	/* ☆ 詳細ページ
	-------------------------------------*/
	.h3-Box-01 { margin-bottom: 9.179vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 3px solid #dddddd; }
	.h3-Box-01 h3 { padding-bottom: 1.932vw; color: #2b2827; font-size: 4.831vw; font-weight: 400; }
	.h3-Box-01 h3:before { content: "\25A0 \a0"; color: #ea5404; font-size: 3.865vw; }
	#sect-01 .h4-ptn-01 {
color: #2b2827;
font-size: 4.348vw;
font-weight: 700;
letter-spacing: 0.266vw;
margin-bottom: 4vw;
	}

	#sect-01 .main-pic { text-align: center; margin-bottom: 7.729vw; }
	#sect-01 .main-pic img { max-width: 100% !important; height: auto !important; }
	#sect-01 .wysiwyg { margin-bottom: 5.797vw; }
	#sect-02 { margin-top: 5.797vw; }
	#sect-02 h5 img{
		padding:0 30vw;
	}
	#sect-02 .gallery-list {display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-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;justify-content: space-between;}
	#sect-02 .gallery-list li {width: 48%;margin-bottom: 2.415vw;}
	#sect-02 .gallery-list li .fit { height: 28.986vw; }
	#sect-02 .gallery-list li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	#sect-02 .gallery-list li:nth-child(4n) { margin-right: 0px; }
	#sect-02 .small { color: #666666; font-size: 3.14vw; font-weight: 400; }
	#sect-03 { margin-top: 10.87vw;margin-bottom: 10.87vw;}
	#sect-03 h5 img{
		padding:0 30vw;
	}
	#sect-03 iframe{width: 100%;height: 80vw;}


	.bottom-bd{
		width: 92vw;
		margin: 0 auto;
	}
	.top-bd{
		width: 92vw;
		margin: 0 auto;
	}
	
	#sect-01{
		width: 92vw;
		margin: 0 auto;
		border: 5px solid #eeece7;
	padding: 4vw;
	margin-bottom: 7.729vw;
	margin-top: 7.729vw;
	}
	
	.sy-ttl-box{
		margin-bottom: 4.831vw;
		position: relative;
	}
	
	.sy-ttl-box .gallery-txt-001{
		position: absolute;
		top: 0;
		right: 0;
	}

	.sy-ttl-box{
		margin-bottom: 4.831vw;
		position: relative;
	}
	
	.sy-ttl-box .gallery-txt-001{
		position: static;
		top: 0;
		right: 0;
		text-align: center;
		font-size: 3.382vw;
		display: block;
	}
	.sy-ttl-box .gallery-ttl{
		width: 25vw;
		margin: 0 auto;
		margin-bottom: 2vw;
	}
	.sy-ttl-box h4.gallery-ttl img{
padding: auto !important;
	}



	#sect-03 .movie-ttl{
		width: 23vw;
		margin: 0 auto;
		margin-bottom: 4vw;
	}


	#sect-03 iframe{
		width: 92vw;
		height: 51.932vw;
		margin: 0 auto;
		display: block;
		}


	/* category-select-02
	-------------------------------------*/
	.category-select-02 {padding-top: 11.594vw;display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-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;justify-content: space-between;}
	.category-select-02 li {width: 48%;padding: 5px 1em 5px 1em;border: 2px solid #19100c;border-radius: 0.483vw; /* CSS3草案 */-webkit-border-radius: 0.483vw; /* Sfari,Google Chrome用 */-moz-border-radius: 0.483vw; /* Firefox用 */color: #19100c;font-size: 3.623vw;font-weight: 700;text-align: center;margin-bottom: 5.797vw;position: relative;}
	.category-select-02 li:hover { background-color: #19100c; color: #fff; }
	.category-select-02 li:hover a { color: #fff; }
	.category-select-02 li:hover a:hover { text-decoration: none; }
	.category-select-02 li:nth-child(5n) { margin-right: 0px; }
	.category-select-02 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-02 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-02 .active-nav:after, .category-select-02 .active-nav:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-02 .active-nav:after { border-color: transparent; border-bottom-color: #19100c; border-width: 1.449vw; margin-left: -1.449vw; }
	.category-select-02 .active-nav:before { border-color: transparent; border-bottom-color: #19100c; border-width: 2.899vw; margin-left: -2.899vw; }
}