@charset "UTF-8";
@import url("search.css");
@import url("works_nav.css");




#contentsWorks{}

#tagtitle{
	text-align: center;
	padding-top: .5em
}






/* ************************************************ 
*	works_list
* ************************************************ */


h1.works_cat,
h2.works_cat{
	padding: 1.2em 1em;
	text-align: center;
	background: rgba(220, 211, 191, 0.2);
	position: relative;
	margin-bottom: 1em;
	color: #840404;
	letter-spacing: 2px
}
 
#works_search{margin: 0 auto}



ul.works_themeli{
	display: flex;
	margin: 0 auto 5%;
}



ul.works_themeli li:last-child {margin-right: 0;}



ul.works_themeli li{line-height: 1.4em}

ul.works_themeli li a{
	display: block;
	border: solid 1px rgba(72, 46, 51, 0.7);
	padding: .4em 1em;
	border-radius: 50px;
	position: relative;
	font-size: .9em;
	text-align: center;
	
}

ul.works_themeli li a:hover{
	background: #482f33;
	color: #fff
}




@media screen and (max-width: 667px) {
	h2.works_cat,
	h1.works_cat{font-size:1.5em;}
	
	ul.works_themeli{
		width: 90%;
		flex-wrap: wrap
	}
		
	ul.works_themeli li{
	margin: 0 10px 10px 0;
	font-size: .9em
	}
		
	#works_search{width: 90%;}
}	

@media print, screen and (min-width: 668px) {
	h2.works_cat,
	h1.works_cat{font-size:1.8em;padding: 1.5em 1em;margin-bottom: 2em;}
	h2.work_concept{
		max-width: 800px;
		margin: 0 auto;
		text-align: center
	}
	.term_description{
		width: 80%;
		margin: 0 auto 2em;
		font-size: 1.1em
	}
	
	ul.works_themeli{}
	ul.works_themeli li{margin: 1em 1em 0 0}
	ul.works_themeli li a{padding: .6em 2em;}
}




ul.workslist li{
	    text-align: left;
	    position: relative
	}
	
	
ul.workslist li a{text-decoration: none}

ul.workslist li h2{
	font-size: 1.1em;
	padding: 1em;
	line-height: 1.5em
}

ul.workslist li h2 span{
	display: block;
	font-size: .7em
}


ul.workslist li{
	width: 100%;
}

ul.workslist li img{
	width:100%;
	height: 240px;
	position: relative;
	object-fit: cover;
	background: #000;
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

ul.workslist li:hover img{
	opacity: .8
}


.view-more{
	text-align: center;
	padding: 1em;
	background: #eee;
	border-radius: 50px;
	position: relative;
	max-width: 400px;
	width: 90%;
	margin: 3em auto 3em;
	-webkit-transition: all .3s;
	transition: all .3s;
	display: flex;
	justify-content: center;
	align-items: center
}


.view-more::before{
	font-family: icomoon;
	content: "\e975";
	padding-right: 1em;
	font-size: 1.2em
}

.view-more:hover{
	background: #212121;
	color: #fff;
	cursor:pointer;
}


.scroller-status{
	text-align: center;
	display: none
}

.loader-ellips {
  display: inline-block;
  margin: 2em auto;
  padding: 1em;
  color: #666;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.12em solid currentColor;
  border-top-color: rgba(102, 102, 102, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


.infinite-scroll-error{
	background: #eee;
	padding: 1.3em
}


@media screen and (max-width: 1024px) {
	ul.workslist li{
		margin-top: 10%
	}
	
	
	.ribbon {
	border-top: 40px solid;
	border-left: 40px solid transparent;}
	
	.no{
		font-size: 10px;
		top: 9px;
		right: 3px;}
}	

@media screen and (min-width: 667px){
	
	ul.workslist {
	  display: grid;
	  grid-template-columns: repeat(3,1fr);
	  gap: 2.5rem;
	  margin-bottom: 10%
	}
}

@media screen and (min-width: 667px) and (max-width: 1024px){
	
	ul.workslist li h2{
	padding: 1.5em 2px 1em;
	}	
	
	ul.workslist li img{height: 220px}
	
}	

@media print, screen and (min-width: 1025px) {

	
	ul.workslist li img{
		height: 35vh;
		max-height: 330px}
	
	.ribbon {
	border-top: 50px solid;
	border-left: 50px solid transparent;}
	
	.no{
		font-size: 10px;
		top: 13px;
		right: 3px;}
		
}	

@media print, screen and (min-width: 1240px) {

}	


/* ************************************************ 
*	house_single
* ************************************************ */


.workpost{
	padding: 5% 0;
	max-width: 1000px;
	margin: 0 auto
}


.related-posts{
	padding: 5%
}

.related-posts h3{
	margin-bottom: 1em;
	font-size: 1.2rem
}




.workpost_title{
	position: relative;
	margin-bottom: 5%;}


.workpost_title span{
	background: #482f33;
	color: #fff;
	display: inline-block;
	font-size: .9em;
	padding: 2px .6em;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100
}

.workpost_title h1{
	padding: 3em 1.5em 2em;
	text-align: center;
	background: rgba(220, 211, 191, 0.2);
	position: relative;
	color: #840404;
	font-size: 1.3em;
	line-height: 1.6em
	}
	

.workpost h2.work_concept{
	margin:0 auto 1.5em;
	padding: 0 1.5em;
	font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem);
	
}


h3.bf_comment{
	font-size: clamp(1.063rem, 0.994rem + 0.34vw, 1.25rem);
	width: 100%;
	margin-bottom: 1em
}



.works_cat_mark{
	font-weight: bold;
	text-align: right;
	display: inline-block;
	padding: 0 .5em;
	position: relative;
	margin-bottom: 1em
}


.single_img{
	text-align: center;
	margin: 0 auto
}



@media screen and (max-width: 667px) {
	.workpost h2.work_concept br{
		display: none
	}

}	

@media print, screen and (min-width: 668px) {

	.workpost h1{
		font-size: 1.5em
	}
	
	.workpost h2.work_concept{
		font-size: 1.3em;
		line-height: 1.8em
	}
}	

@media print, screen and (min-width: 1024px) {}		



.before_after{
	padding: 2em 0;
	border-bottom: solid 1px #eee;
	margin: 0 auto;
	
}

.before_after figure{
	position: relative;
	text-align: center;
	display: flex;
	flex-wrap:wrap;
	flex-direction: row-reverse
}

.before_after figure a{
	display: block;
	width: calc(100% - 40px);
	position: relative;
}


.before_after figure img{
	object-fit: cover;
	width: 100%;
	aspect-ratio: 3 / 3;
}

.before_after figure figcaption{
	 -ms-writing-mode: tb-rl;
	 writing-mode: vertical-rl;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 letter-spacing: 1px;
	 background: rgba(220, 211, 191, 0.4);
	 width: 40px;
}

figure.after figcaption{
	background:var(--color-main);
	color: #fff
}

a.zoom{
	display: block;
	position: relative;
}

.before_after a:after,
a.zoom:after{
	display: block;
	position: absolute;
	font-family: icomoon;
	content: "\e987";
	color: #fff;
	opacity: .4;
	z-index: 50;
	bottom: .8em;
	right: .8em;
	font-size: 1.5rem
}


.aftergallary{
	padding: 2em;
}
.aftergallary h3{
	text-align: center;
	margin: 0 auto 1em;
}

.aftergallary ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
}

.aftergallary ul li{width: 100%;}

.aftergallary ul img{
	object-fit: cover;
	width: 100%;
	aspect-ratio: 1/1;
}



@media screen and (max-width: 767px) {
	h3.bf_comment{margin-bottom: 1.5em}
	
	.before_after figure.before{
	margin-bottom: 2em
	}


	.before_after figure img{
		margin: 0 auto
	}

}	

@media screen and (max-width: 768px) {
	.before_after{width: 90%;}
}

@media print, screen and (min-width: 768px) {
	.before_after{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		align-items: center;
		padding: 5em 2em;
	}
	
	
	.before_after figure{
		width: 47%
	}
	
	.before_after figure figcaption{width: 40px;}
	
	.before_after figure a{
		width: calc(100% - 40px);
		display: block;
	}
	
	.before_after figure img{
		object-fit: cover;
		width: 100%;
		aspect-ratio: 3 / 3;
	}
	
	.aftergallary ul {
	  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	
}	

@media print, screen and (min-width: 1024px) {}	


/*タグ*/

#taglist{
	text-align: center;
	margin:0 auto 1.5em
}

ul.tags{
	position: relative;
}

ul.tags:before{
	font-family: icomoon;
	content: "\e936";
	padding-right: .5em;
	font-weight: bold;
	font-size: 1.1em
}


ul.tags li{
	margin-right: 8px;
}

ul.tags li a:before{
	content: "# ";
}


ul.tags li a{
	display: block;
	padding: 0 .2em;
	line-height: 1.8em;
	position: relative;
}







@media screen and (max-width: 667px) {
	ul.tags{text-align: left;padding: 0 1em}
	ul.tags li{display: inline-block;}
	.workpost h2{padding: 0 1em;text-align: left}
}	


@media print, screen and (min-width: 668px) {
	ul.tags{
	display: flex;
	justify-content: center;
	}
	.workpost h2{}
}



/* ************************************************ 
*	Works_body
* ************************************************ */

#works_contents_body{
	margin: 0 auto
}




	
@media  (min-width: 0px) and (max-width: 480px) {
	#house_ban img{width: 80%;height: auto;margin: 0 auto;display: block}
	#hisao_usui{
	float:left;
	margin-right:1em;
	width: 30%;
	}
	div#aisatsuTxt p{font-size: .9em}
}	

@media  (min-width: 481px) {
	h2#subtitle{font-size: 1.4em;}
	div#aisatsuTxt ul li{font-size: 1.3em}
	#aisatsuTxt{padding: 2em 2.5em;}
	div#aisatsuTxt div#hisao_usui{
	float:left;
	margin-right:2em;
	}

}





/* ************************************************ 
*	#Works_body
* ************************************************ */






.workpost .subphoto{}

.workpost .subphoto ul{}
.workpost .subphoto li{
	margin-bottom: 15px;
	background: url(../images/layout/header/bg_base.gif);
	padding: 1.8em;
}

@media  (min-width: 0px) and (max-width: 414px) {
	.workpost .subphoto li{padding: 1.2em;}
}	
@media  (min-width: 415px) {
	.workpost .subphoto li{padding: 1.8em;}
}


.workpost .subphoto li img{
	height: auto;
	width: 100%;
}


.workpost .subphoto li .sub_photo_cap p{
	text-align: left;
	color: #6F4A00;
	font-size: 1.2em;
	font-style: normal;
	line-height: 1.6em;
	font-weight: normal;
	font-variant: normal;
	padding-top: .8em;
}

.workpost .subphoto li .sub_photo_cap p br{display: none}

@media  (min-width: 0px) and (max-width: 414px) {
	
}	
@media  (min-width: 415px) {
	.workpost .subphoto li .sub_photo{width: 70%;}
	.workpost .subphoto li .sub_photo_cap{width: 30%;}
	
	.workpost .subphoto li:nth-child(odd) .sub_photo{float: left;}
	.workpost .subphoto li:nth-child(odd) .sub_photo_cap{float: right;}
	.workpost .subphoto li:nth-child(odd) .sub_photo_cap p{margin-left: 20px;}
	
	.workpost .subphoto li:nth-child(even) .sub_photo{float: right;}
	.workpost .subphoto li:nth-child(even) .sub_photo_cap{float: left;}
	.workpost .subphoto li:nth-child(even) .sub_photo_cap p{margin-right: 20px;}
}






.workpost .custumer{
	background: url(../images/material/mermaid_bg_g.gif);
	padding: 25px;
	margin-bottom: 20px;
}

.workpost .custumer h2{
	margin-bottom: 10px;
	color: #390;
	font-size: 116%;
	border-bottom: 1px solid #FFF;
	padding-bottom: 10px;
	line-height: 1.5em;
}

.cc_body{
	font-size: 93%;
	line-height: 1.7em;
	color: #360;
}


.post-meta{}



/* ************************************************ 
*	reform_single
* ************************************************ */

#reformpost{
	padding-top: 20px;
	margin-bottom: 40px;
}


dl.gaiyo{
	margin: 0 auto 2em;
	text-align: center;
	font-weight: bold;
	}

dl.gaiyo dt{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	position: relative;
	font-weight: bold;
	background: rgba(255, 217, 0, 0.3);
	padding: .5em 1em .3em;
	margin-bottom: .5em
}

dl.gaiyo dd{}


.reformset{
	padding-bottom: 3em;
	border-bottom: dotted 2px #ccc;
	margin-bottom: 3em
}


div#customer_comment{
	text-align: center;
	margin-top: 20px;
}
.comment_box{
	position: relative;
	width: 100%;
	margin: 0 auto;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}


@media  (min-width: 0px) and (max-width: 414px) {
	.reformset{padding: 1.5em;
		position: relative;
		border: solid 3px rgba(255, 217, 0, 0.3);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;}
	
	.reformset .before{}
	.reformset h4{
		font-weight: bold;
		text-align: center;
		padding: .6em 1em .5em;
		background: rgba(234, 234, 234, 0.95);
		font-size: 1.3em;
		margin-bottom: 1em;
	}
	div.before_img{}
	
	.yajirushi{
		position: absolute;
		bottom: -60px;
	}
	
	.reformset .before_img img{
	width: 100%;
	height: auto
	}
	
	.comment_box img{
	width: 100%;
	height: auto
	}


	.reformset .after{
		position: relative;
	}

	
	.reformset .setimg{
		padding: 1em;
		-webkit-box-shadow: #ccc 0px 0px 5px;
		-moz-box-shadow: #ccc 0px 0px 5px;
		box-shadow: #ccc 0px 0px 5px;
		position: relative;}
	
	.reformset .after_img img{
		width: 100%;
		height: auto;	
	}
	
	.comment_box{padding: 2em 3em;}
}	




@media  (min-width: 415px) {
	.reformset .before{
		padding: 1em;
		float: left;
		width: 30%;
		position: relative;
		border: solid 3px rgba(255, 217, 0, 0.3);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.reformset h4{
		font-weight: bold;
		text-align: center;
		padding: .6em 1em .5em;
		background: rgba(234, 234, 234, 0.95);
		font-size: 1.2em;
		margin-bottom: .5em;
	}
	div.before_img{}
	
	.yajirushi{
		position: absolute;
		right: -60px;
		top: 30%;
	}
	
	
	.reformset .before_img img{
	width: 100%;
	height: auto
	}
	
	
	.reformset .after{
		float: right;
		width: 67%;
		position: relative;
	}
	
	.reformset .after h4{
		font-size: 1.7em;
	}
	
	.reformset .setimg{
		padding: 1em;
		-webkit-box-shadow: #ccc 0px 0px 5px;
		-moz-box-shadow: #ccc 0px 0px 5px;
		box-shadow: #ccc 0px 0px 5px;
		position: relative;}
	
	.reformset .after_img img{
		width: 100%;
		height: auto;	
	}

	.comment_box{padding: 5em 6em 3em;}
}



#reform_price{}
#reform_price h2{text-align: center;
	margin-bottom: 1em;
}
.reform_meyasu{
	margin-bottom: 3em
}
@media  (min-width: 0px) and (max-width: 480px) {
	.reform_meyasu ul li{
		background: #eee;
	    text-align: center;
	    padding: 1.5em;
		margin-bottom: 1em}
}	
@media  (min-width: 481px) {
	.reform_meyasu ul{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 -2% 0 0;
		overflow: hidden;
		zoom: 1;
	}
	.reform_meyasu ul li{
	    float: left;
	    margin: 0 2% 10px 0;
	    width: 48%;
	    background: #eee;
	    text-align: center;
	    padding: 1.5em
	}
}
.reform_meyasu ul li span{display: block;
	font-size: 2em;
	padding-top: .5em
}
@media  (min-width: 0px) and (max-width: 480px) {}	
@media  (min-width: 481px) {
	.reform_meyasu p{
		text-align: center;
	}
}


.reform_qa{}

	



.reform_qa h3{
	text-align: center;margin-bottom: 1em;font-size: 1.1em;color: #ff4500;
	border:solid 2px #ffbca3;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	position: relative;
	padding: .5em}
	

.reform_qa dt{font-size: 1.1em;padding: 0 1em;line-height: 1.5em;font-weight: bold}
.reform_qa dt:before{
	content: "Q.";
	font-size: 1.2em;
	padding-right: .5em
}
.reform_qa dd{
	padding: .5em 1em 1em;
	border-bottom: solid 1px #eee;
	margin-bottom: 1em
}

@media  (min-width: 481px) {
	.reform_qa h3{font-size: 1.3em}
	.reform_qa{width: 80%;margin: 0 auto}
	.reform_qa dl{margin: 0 1em}
	.reform_qa dd{padding: .5em 2.7em 1em;}
}



.reco_tag a{
	display: block;
	padding: 1em;
	background: #ffe48b;
	border-radius: 3px;
	position: relative;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.reco_tag a:before{
	content: "Topics：";
	font-weight: bold
}

.reco_tag a:hover{
	background: #ffae00;
	color: #fff;
	text-decoration: none
}

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

@media print, screen and (min-width: 668px) {
	.reco_tag{
	text-align: center
	}
}	

@media print, screen and (min-width: 1000px) {}