@charset "UTF-8";
/*-----------------------------------------------------	*/
/*	リフォーム・リノベーション					*/
/*-----------------------------------------------------	*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
/*common*/
.page-main {
	background: url("../images/reform_renovation/main.jpg") no-repeat center center;
	background-size: 100% auto;
}
@media screen and (max-width: 1040px) {
	.page-main {
		background: url("../images/reform_renovation/main.jpg") no-repeat center center;
		background-size: auto 100%;
	}
}
@media screen and (max-width: 768px) {
	.page-main {
		background: url("../images/reform_renovation/main.jpg") no-repeat center center;
		background-size: cover;
	}
}
.re_point article {
	margin-bottom: 60px;
}
.re_point article h2 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
.re_point article h2 img {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
.re_point article .txt {
	margin-bottom: 50px;
}
.re_point article .checklist {
	background: #fff;
	padding: 30px 30px 20px 30px;
	position: relative;
}
.re_point article .checklist .tit-chklist {
	background: #FD9090;
	color: #fff;
	font-size: 16px;
	width: 116px;
	padding: 6px 10px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	margin: -20px 0 0 -20px;
	text-align: center;
}
.re_point article li {
	margin-bottom: 10px;
}
.re_point article li .ll {
	display: inline-block;
	width: 280px;
}
.re_point article li .lr {
	display: inline-block;
	width: 400px;
}
@media screen and (max-width: 768px) {
	.re_point article {
		margin-bottom: 40px;
	}
	.re_point article:last-child {
		margin-bottom: 0;
	}
	.re_point article h2 {
		font-size: 17px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.re_point article h2 img {
		display: inline-block;
		margin-right: 5px;
		vertical-align: middle;
	}
	.re_point article .txt {
		margin-bottom: 40px;
		font-size: 15px;
		line-height: 1.6;
	}
	.re_point article .checklist {
		background: #fff;
		padding: 30px 30px 20px 30px;
		position: relative;
	}
	.re_point article .checklist .tit-chklist {
		background: #FD9090;
		color: #fff;
		font-size: 16px;
		width: 116px;
		padding: 6px 10px;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		margin: -20px 0 0 -20px;
		text-align: center;
	}
	.re_point article li {
		margin-bottom: 10px;
		font-size: 15px;
		line-height: 1.6;
	}
	.re_point article li .ll {
		display: block;
		width: auto;
	}
	.re_point article li .lr {
		display: block;
		width: auto;
	}
}
/*ご相談の流れ*/
.re_flow article {
	margin-bottom: 60px;
	background: #fff;
	position: relative;
}
.re_flow article:last-child {
	margin-bottom: 0;
}
.re_flow article.ucursor:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -40px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #797979 transparent transparent transparent;
	border-width: 15px 15px 0 15px;
}
.re_flow article .flowlist {
	background: #fff;
	position: relative;
	height: 190px;
}
.re_flow article .flowlist .tit-chklist {
	background: #000000;
	color: #fff;
	font-size: 14px;
	width: 70px;
	padding: 6px 10px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	margin: -20px 0 0 -20px;
	text-align: center;
	z-index: 10;
}
.re_flow article figure {
	position: absolute;
	top: 30px;
	left: 50px;
	width: 210px;
}
.re_flow article p {
	padding: 10px 30px 30px 320px;
	line-height: 1.8;
}
.re_flow article p.flow_ttl{
	font-size: 16px;
	font-weight: 700;
	padding: 25px 30px 0 320px;
}

.re_flow article p.flow_ttl .flow_sttl{
	font-size: 13px;
	font-weight: 700;
}



.re_flow article:nth-of-type(2) figure {
	top: 30px;
	left: 50px;
	width: 230px;
}

.re_flow article:nth-of-type(3) figure {
	top: 35px;
	left: 90px;
	width: 130px;
}

.re_flow article:nth-of-type(4) figure {
	top: 30px;
	left: 85px;
	width: 130px;
}

.re_flow article:nth-of-type(5) figure {
	top: 30px;
	left: 95px;
	width: 140px;
}

.re_flow article:nth-of-type(6) figure {
	top: 30px;
	left: 100px;
	width: 110px;
}













@media screen and (max-width: 768px) {
	.re_flow article {
		margin-bottom: 60px;
		background: #fff;
		position: relative;
	}
	.re_flow article:last-child {
		margin-bottom: 0;
	}
	.re_flow article.ucursor:after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -40px;
		left: 0;
		width: 0px;
		height: 0px;
		margin: auto;
		border-style: solid;
		border-color: #797979 transparent transparent transparent;
		border-width: 15px 15px 0 15px;
	}
	.re_flow article .flowlist {
		background: #fff;
		position: relative;
		height: auto;
	}
	.re_flow article .flowlist .tit-chklist {
		background: #000000;
		color: #fff;
		font-size: 14px;
		width: 70px;
		padding: 6px 10px;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		margin: -20px 0 0 -20px;
		text-align: center;
		z-index: 10;
	}
	.re_flow article figure {
		position: inherit;
		top: auto;
		left: auto;
		width: 100%;
		padding-top: 30px;
	}
	.re_flow article figure img {
		width: auto;
		height: 30vw;
	}
	.re_flow article p {
		padding: 20px 20px 20px 20px;
		line-height: 1.7;
	}
	
	.re_flow article figure {
	position: inherit;
		top: auto;
		left: auto;
	width: auto;
		height: auto;
		text-align: center;
		margin-bottom: 20px;
}
.re_flow article p {
	padding: 20px 20px 20px 20px;
	line-height: 1.8;
}
.re_flow article p.flow_ttl{
	font-size: 4.5vw;
	font-weight: 700;
	padding: 0px 20px 0px 20px;
	text-align: center;
	line-height: 1.4;
}
.re_flow article p.flow_ttl .flow_sttl{
	font-size: 3.5vw;
	font-weight: 700;
	display: block;
}
.re_flow article:nth-of-type(2) figure {
	top: auto;
	left: auto;
	width: auto;
}

.re_flow article:nth-of-type(3) figure {
	top: auto;
	left: auto;
	width: auto;
}

.re_flow article:nth-of-type(4) figure {
	top: auto;
	left: auto;
	width: auto;
}

.re_flow article:nth-of-type(5) figure {
	top: auto;
	left: auto;
	width: auto;
}

.re_flow article:nth-of-type(6) figure {
	top: auto;
	left: auto;
	width: auto;
}
	
	
}
/*施工事例*/
.re_works article {
	margin-bottom: 60px;
	position: relative;
	float: left;
	width: 220px;
	margin-right: 38px;
}
.re_works article:nth-of-type(3n+0) {
	margin-right: 0px;
}
.re_works article .worklist {}
.re_works article .worklist .tit-cat {
	background: #000000;
	color: #fff;
	font-size: 14px;
	width: auto;
	padding: 6px 10px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	margin: -20px 0 0 -20px;
	text-align: center;
	z-index: 10;
	display: block;
}
.re_works article figure {
	width: 220px;
}
.re_works article p {
	line-height: 1.6;
	padding: 10px 0 0 0;
}
.re_works article a {
	display: block;
}
.re_works article a:hover {
	opacity: 0.7;
}
.re_works .link_more {
	width: 172px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.re_works article {
		margin-bottom: 50px;
		position: relative;
		float: left;
		width: 45%;
		margin-right: 0;
	}
	.re_works article:nth-of-type(3n+0) {
		margin-right: 0px;
	}
	.re_works article:nth-of-type(2n+0) {
		float: right;
	}
	.re_works article .worklist {}
	.re_works article .worklist .tit-cat {
		background: #000000;
		color: #fff;
		font-size: 14px;
		width: auto;
		padding: 6px 10px;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		margin: -20px 0 0 -20px;
		text-align: center;
		z-index: 10;
		display: block;
	}
	.re_works article figure {
		width: 100%;
	}
	.re_works article p {
		line-height: 1.6;
		padding: 10px 0 0 0;
	}
	.re_works article a {
		display: block;
	}
	.re_works article a:hover {
		opacity: 0.7;
	}
	.re_works .link_more {
		width: auto;
		margin: 0 auto;
	}
}
/*よくあるご質問*/
.re_qa article {
	margin-bottom: 20px;
	background: url("../images/common/cursor_r.png") no-repeat 98% center #F2F2F2;
	background-size: 22px auto;
}
.re_qa article:last-child {
	margin-bottom: 0;
}
.re_qa article .qalist .tit-qa {
	width: 75px;
	background: #000000;
	color: #fff;
	font-size: 24px;
	padding: 10px 0 15px 0;
	box-sizing: border-box;
	text-align: center;
	display: inline-block;
}
.re_qa article p.q {
	font-size: 16px;
	line-height: 1.6;
	padding: 10px 0 0 20px;
	display: inline-block;
}
.re_qa article a {
	display: block;
}
.re_qa article a:hover {
	opacity: 0.7;
}
.mb0 {
	margin-bottom: 0;
}
/*詳細*/
.re_qa article.alist {
	background: none;
}
.re_qa article.alist .qalist {
	background: #F2F2F2;
}
.answer {
	background: #F2F2F2;
	margin-top: 20px;
	margin-bottom: 40px;
}
.re_qa article .answer .tit-a {
	width: 75px;
	background: #FD9090;
	color: #fff;
	font-size: 24px;
	padding: 10px 0 10px 0;
	box-sizing: border-box;
	text-align: center;
	float: left;
}
.re_qa article p.a {
	font-size: 15px;
	line-height: 1.8;
	padding: 15px 20px 20px 0px;
	margin-left: 100px;
}
@media screen and (max-width: 768px) {
	.re_qa article {
		margin-bottom: 20px;
		background: url("../images/common/cursor_r.png") no-repeat 98% center #F2F2F2;
		background-size: 18px auto;
		overflow: hidden;
	}
	.re_qa article .qalist {}
	.re_qa article .qalist .tit-qa {
		width: 50px;
		background: #000000;
		color: #fff;
		font-size: 20px;
		padding: 10px 0 10px 0;
		box-sizing: border-box;
		text-align: center;
		float: left;
		padding-bottom: 10000px;
		margin-bottom: -10000px;
		vertical-align: middle;
		display: table-cell;
	}
	.re_qa article p.q {
		font-size: 15px;
		line-height: 1.6;
		padding: 10px 0 10px 20px;
		display: inline-block;
		width: 75%;
	}
	.re_qa article a {
		display: block;
	}
	.re_qa article a:hover {
		opacity: 0.7;
	}
	/*詳細*/
	.re_qa article.alist {
		background: none;
	}
	.re_qa article.alist .qalist {
		background: #F2F2F2;
		overflow: hidden;
	}
	.answer {
		background: #F2F2F2;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.re_qa article .answer .tit-a {
		width: 50px;
		background: #FD9090;
		color: #fff;
		font-size: 22px;
		padding: 10px 0 10px 0;
		box-sizing: border-box;
		text-align: center;
		float: left;
	}
	.re_qa article p.a {
		font-size: 14px;
		line-height: 1.7;
		padding: 15px 20px 20px 0px;
		margin-left: 70px;
	}
}
/*費用・プラン*/
.re_plan {}
.re_plan article {
	margin-bottom: 150px;
	position: relative;
}
.re_plan article:last-child {
	margin-bottom: 0;
}
.re_plan article.ucursor:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -40px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #797979 transparent transparent transparent;
	border-width: 15px 15px 0 15px;
}
.re_plan article .planmain {
	position: relative;
}
.re_plan article .planmain .stnum {
	background: #000000;
	width: auto;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	padding: 20px 20px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	margin: -20px 0 0 -20px;
	text-align: left;
	z-index: 10;
}
.re_plan article .planmain .sttit {
	font-size: 30px;
	margin-bottom: 10px;
}
.re_plan article .planmain .ststit {
	font-size: 16px;
}
.re_plan article figure {
	width: 100%;
	height: 442px;
	margin-bottom: 100px;
}
.re_plan article .msg {
	background: #000;
	font-size: 14px;
	color: #fff;
	padding: 15px;
	margin: 0 -10px -80px 0;
	position: absolute;
	bottom: 0;
	right: 0;
}
.ba {
	position: relative;
	height: 410px;
	margin-bottom: 50px;
	background: url("../images/reform_renovation/ic_cursor_after.png") no-repeat 445px 101px;
	background-size: 10px auto;
}
.ba .after {
	width: 430px;
	float: left;
	position: relative;
}
.ba .ic_after {
	position: absolute;
	top: 0;
	left: 0;
	background: #FD9090;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 15px;
	margin: -20px 0 0 -20px;
	padding-top: 24px;
	box-sizing: border-box;
	font-weight: bold;
}
.ba .before {
	width: 280px;
	float: right;
	position: relative;
}
.ba .ic_before {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	color: #000;
	font-size: 15px;
	margin: -20px 0 0 -20px;
	padding-top: 24px;
	box-sizing: border-box;
	font-weight: bold;
}
.ba .voice {
	position: absolute;
	background: #fff;
	bottom: 0;
	right: 0;
	padding: 20px;
	width: 440px;
	box-sizing: border-box;
}
.ba .voice h3 {
	background: url("../images/reform_renovation/ic_voice.png") no-repeat 0 center;
	background-size: 22px auto;
	font-size: 16px;
	font-weight: bold;
	padding: 5px 0 3px 30px;
	line-height: 1;
	margin-bottom: 15px;
}
.ba .voice .vname {
	position: absolute;
	top: 20px;
	right: 20px;
}
.staffvoice {
	background: #F0EFE8;
	padding: 25px;
	overflow: hidden;
	position: relative;
}
.tanto {
	width: 120px;
	text-align: center;
	float: left;
}
.tanto p {
	padding-top: 15px;
}
.tanto strong {
	font-size: 16px;
}
.smsg {
	margin-left: 150px;
}
.staffvoice .aboutprice {
	position: absolute;
	bottom: 25px;
	right: 25px;
	font-size: 18px;
	border-bottom: #000000 4px solid;
	font-weight: bold;
}
.staffvoice .aboutprice strong {
	font-size: 30px;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
.re_plan article {
	margin-bottom: 30px;
}

.re_plan article .planmain {
	position: relative;
}
.re_plan article .planmain .stnum {
	background: #000000;
	width: auto;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	padding: 15px 15px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	margin: -20px 0 0 -20px;
	text-align: left;
	z-index: 10;
}
.re_plan article .planmain .sttit {
	font-size: 20px;
	margin-bottom: 5px;
}
.re_plan article .planmain .ststit {
	font-size: 14px;
}
.re_plan article figure {
	width: 100%;
	height: 52.933vw;
	margin-bottom:0;
}
.re_plan article .msg {
	background: #000;
	font-size: 13px;
	color: #fff;
	padding: 10px;
	margin: 0 0px 0 0;
	position: inherit;
	bottom: auto;
	right: auto;
}
.ba {
	position: relative;
	height: auto;
	margin-bottom: 40px;
	background: none
}
.ba .after {
	width: auto;
	float: none;
	position: relative;
	margin-bottom: 30px;
}
.ba .ic_after {
	position: absolute;
	top: 0;
	left: 0;
	background: #FD9090;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 15px;
	margin: -20px 0 0 -20px;
	padding-top: 24px;
	box-sizing: border-box;
	font-weight: bold;
}
.ba .before {
	width: 280px;
	float: right;
	position: relative;
	margin-bottom: 30px;
}
.ba .ic_before {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	color: #000;
	font-size: 15px;
	margin: -20px 0 0 -20px;
	padding-top: 24px;
	box-sizing: border-box;
	font-weight: bold;
}
.ba .voice {
	position: inherit;
	background: #fff;
	bottom: auto;
	right: auto;
	padding: 20px;
	width: auto;
	box-sizing: border-box;
	clear: both;
}
.ba .voice h3 {
	background: url("../images/reform_renovation/ic_voice.png") no-repeat 0 center;
	background-size: 22px auto;
	font-size: 15px;
	font-weight: bold;
	padding: 5px 0 3px 30px;
	line-height: 1;
	margin-bottom: 15px;
}
.ba .voice .vname {
	position: absolute;
	top: 20px;
	right: 20px;
}
.staffvoice {
	background: #F0EFE8;
	padding: 15px;
	overflow: hidden;
	position: relative;
}
.tanto {
	width: 120px;
	text-align: center;
	float: left;
}
.tanto p {
	padding-top: 10px;
}
.tanto strong {
	font-size: 15px;
}
.smsg {
	margin-left: 150px;
}
.staffvoice .aboutprice {
	position: absolute;
	bottom: 25px;
	right: 25px;
	font-size: 18px;
	border-bottom: #000000 4px solid;
	font-weight: bold;
}
.staffvoice .aboutprice strong {
	font-size: 30px;
	font-weight: bold;
}
}

/*リフォーム　メニュー・費用*/

.ttl_read_btn{
	margin: 30px auto;
}

.ttl_at{
	width: 620px;
	margin: 0 auto;
	border: #db0000 1px solid;
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
}

.ttl_at strong{
	color: #db0000;
}

.re_menu{
	width: 1000px;
margin: 0 auto;}

.re_menu_inner{
	background: #fff;
	padding: 50px 50px 10px 50px;
	margin-bottom: 50px;
}

.re_menu_ttl{
	text-align: center;
	margin-bottom: 50px;
}

.re_menu_ttl p{
	 font-family: 'Poppins', sans-serif;
 font-size: 18px;
	color: #908a64;
	margin-bottom: 10px;
}

.re_menu_ttl h2{
 font-size: 28px;
	font-weight: 700;
}

.re_menu_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.re_menu_list article{
	width: 430px;
	margin-bottom: 50px;
}

.re_menu_list article figure{
	margin-bottom: 25px;
}

.re_menu_list article .re_menu_box_ttl{
	border-left: #908a64 8px solid;
	padding: 10px 0 10px 15px;
	margin-bottom: 20px;
}

.re_menu_list article .re_menu_box_ttl h3{
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1;
}

.re_menu_list article .re_menu_box_ttl h3 span{
	font-size: 12px;
	font-weight: 400;
	margin-left: 10px;
}


.re_menu_list .re_menu_price{
	color: #908a64;
	line-height: 1;
	
}

.re_menu_list .re_menu_price dt{
	font-size: 14px;
	display: inline-block;
	margin-right: 10px;
	
}

.re_menu_list .re_menu_price dd{
font-size: 16px;
	display: inline-block;
}

.re_menu_list .re_menu_price dd strong{
font-size: 20px;
	
}

.re_menu_list article .txt{
	font-size: 16px;
	line-height: 2;
}

.re_menu_list article .txt a{
	text-decoration: underline;
}

.re_menu_list article .txt i{
	padding: 0 5px ;
}

.re_menu_list article.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.more {
	display: none;
}



@media screen and (max-width: 768px) {
	
.ttl_read_btn{
	margin: 5vw auto;
}

.ttl_at{
	width: auto;
	margin: 0 auto;
	border: #db0000 1px solid;
	padding: 3vw 0;
	text-align: center;
	font-size: 3.5vw;
	line-height: 1.8;
}

.re_menu{
	width: auto;
margin: 0 5vw;}

.re_menu_inner{
	background: #fff;
	padding: 5vw 5vw 1vw 5vw;
	margin-bottom: 50px;
}

.re_menu_ttl{
	text-align: center;
	margin-bottom: 5vw;
}

.re_menu_ttl p{
	 font-family: 'Poppins', sans-serif;
 font-size: 3.5vw;
	color: #908a64;
	margin-bottom: 2vw;
}

.re_menu_ttl h2{
 font-size: 5vw;
}

.re_menu_list{
	display: block;
}

.re_menu_list article{
	width: auto;
	margin-bottom: 8vw;
}

.re_menu_list article figure{
	margin-bottom: 3vw;
}

.re_menu_list article .re_menu_box_ttl{
	border-left: #908a64 8px solid;
	padding: 1vw 0 1vw 2.4vw;
	margin-bottom: 3vw;
}

.re_menu_list article .re_menu_box_ttl h3{
	font-size: 4.5vw;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1;
}

.re_menu_list article .re_menu_box_ttl h3 span{
	font-size: 3vw;
	font-weight: 400;
	margin-left: 0;
	padding: 2vw 0;
	display: block;
}


.re_menu_list .re_menu_price{
	color: #908a64;
	line-height: 1;
	
}

.re_menu_list .re_menu_price dt{
	font-size: 3.5vw;
	display: inline-block;
	margin-right: 3vw;
	
}

.re_menu_list .re_menu_price dd{
font-size: 3.5vw;
	display: inline-block;
}

.re_menu_list .re_menu_price dd strong{
font-size: 4vw;
	
}

.re_menu_list article .txt{
	font-size: 4vw;
	line-height: 2;
}

.re_menu_list article .txt a{
	text-decoration: underline;
}

.re_menu_list article .txt i{
	padding: 0 5px ;
}

.re_menu_list article.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}


.more {
	display: block;
  text-align: center;
	margin-bottom: 10vw;
}

.more button {
  width: 100%;
	font-size: 4vw;
  text-align: center;
  cursor: pointer;
  transition: bottom 0.2s;
	background: none;
	border: none;
	color: #333;
}
.active {
    background: none;
}
	
}