@charset "UTF-8";
/*
 * sub_layout.css
 *
 */

/* !mainvisual
---------------------------------------------------------- */
.main {
	width: 100%;
	height:250px;
	position: relative;
	background:url(../img/sub_main.jpg) 50% 50% no-repeat;
	background-size:cover;
	-webkit-animation: bg 2s 1 ease;
	-moz-animation: bg 2s 1 ease;
	animation: bg 2s 1 ease ;
}
	.main h1 {
		position:absolute;
		display:block;
		width:360px;
		height:140px;
		background:rgba(103,71,39,.85);
		top:50%;
		margin-top:-70px;
		left:50%;
		margin-left:-180px;
		font-size:18px;
		font-weight:bold;
		line-height:1.4;
		color:#FFF;
		text-align:center;
		padding-top:32px;
		/* animation: tit 2.2s 1 ease ; */
	}
		.main h1 span {
			display:inline-block;
			font-size:36px;
			font-family: 'Volkhov', serif;
			letter-spacing:0.04em;
			padding:0 44px;
			position:relative;
		}
			.main h1 span:before {
				position:absolute;
				content:"";
				width:31px;
				height:14px;
				background:url(../img/sub_main_tit_bg1.png) 0 0 no-repeat;
				background-size:31px 14px;
				top:18px;
				left:0;
			}
			.main h1 span:after {
				position:absolute;
				content:"";
				width:31px;
				height:14px;
				background:url(../img/sub_main_tit_bg2.png) 0 0 no-repeat;
				background-size:31px 14px;
				top:18px;
				right:0;
			}

@keyframes bg {
    0% {
        opacity: 0;
    }
	30% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

/* @keyframes tit {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	50% {
        opacity: 0;
		transform: translateY(50px);
    }
	100% {
        opacity: 1;
		transform: translateY(0px);
    }
} */

@media screen and (max-width:1039px){
.main {
	height:180px;
}
	.main h1 {
		width:320px;
		height:110px;
		margin-top:-55px;
		margin-left:-160px;
		font-size:16px;
		padding-top:22px;
	}
		.main h1 span {
			font-size:30px;
		}
			.main h1 span:before {
				top:14px;
			}
			.main h1 span:after {
				top:14px;
			}
}

@media screen and (max-width:767px){
.main {
	height:130px;
}
	.main h1 {
		width:260px;
		height:90px;
		margin-top:-45px;
		left:50%;
		margin-left:-130px;
		font-size:14px;
		padding-top:18px;
	}
		.main h1 span {
			font-size:26px;
			padding:0 36px;
		}
			.main h1 span:before {
				width:24px;
				height:11px;
				background:url(../img/sub_main_tit_bg1.png) 0 0 no-repeat;
				background-size:24px 11px;
				top:12px;
			}
			.main h1 span:after {
				width:24px;
				height:11px;
				background:url(../img/sub_main_tit_bg2.png) 0 0 no-repeat;
				background-size:24px 11px;
				top:12px;
			}
/* @keyframes tit {
    0% {
        opacity: 0;
		transform: translateY(30px);
    }
	50% {
        opacity: 0;
		transform: translateY(30px);
    }
	100% {
        opacity: 1;
		transform: translateY(0px);
    }
} */
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
}
	.subMax1000 {
		width:100%;
		padding:0 50px;
	}
		.subMax1000 div.inner {
			width:100%;
			max-width:1000px;
			margin:0 auto;
		}

.linkInPage {
	margin-top:-80px;
	padding-top:80px;
}

@media screen and (max-width:1039px){
	.subMax1000 {
		padding:0 35px;
	}
}

@media screen and (max-width:767px){
	.subMax1000 {
		padding:0 25px;
	}
	
.linkInPage {
	margin-top:-70px;
	padding-top:70px;
}
}

@media screen and (max-width:360px){
	.subMax1000 {
		padding:0 20px;
	}
}

/* !会社概要
---------------------------------------------------------- */
.company01 {
	padding-top:100px;
	padding-bottom:100px;
}

@media screen and (max-width:1039px){
.company01 {
	padding-top:80px;
	padding-bottom:90px;
}
}

@media screen and (max-width:767px){
.company01 {
	padding-top:70px;
	padding-bottom:70px;
}
}

/* !リフォーム
---------------------------------------------------------- */
.reform01 {
	padding-top:100px;
}

.reformMenu {
	width:100%;
	padding-bottom:80px;
	border-bottom:1px dotted #CCC;
}
	.reformMenu div.right {
		width:50%;
		float:right;
	}
		.reformMenu div.right h2 {
			font-size:24px;
			font-weight:bold;
			color:#674727;
			text-align:center;
			line-height:1.4;
			margin-bottom:40px;
		}
			.reformMenu div.right h2 span {
				display:inline-block;
				font-family: 'Volkhov', serif;
				font-size:60px;
				color:#F0972D;
				letter-spacing:0.04em;
				border-bottom:1px solid #F0972D;
				margin-bottom:30px;
			}
	.reformMenu img {
		display:block;
		float:left;
		width:42%;
	}
	
.reformMenu2 {
	width:100%;
	padding-bottom:80px;
	border-bottom:1px dotted #CCC;
}
	.reformMenu2 div.left {
		width:50%;
		float:left;
	}
		.reformMenu2 div.left h2 {
			font-size:24px;
			font-weight:bold;
			color:#674727;
			text-align:center;
			line-height:1.4;
			margin-bottom:40px;
		}
			.reformMenu2 div.left h2 span {
				display:inline-block;
				font-family: 'Volkhov', serif;
				font-size:60px;
				color:#F0972D;
				letter-spacing:0.04em;
				border-bottom:1px solid #F0972D;
				margin-bottom:30px;
			}
	.reformMenu2 img {
		display:block;
		float:right;
		width:42%;
	}
	
.gaiheki {
	width:100%;
	background:#F7F1EE;
	padding:100px 50px 100px 50px;
}
	.gaiheki div.inner {
		width:100%;
		max-width:1000px;
		margin:0 auto; 
	}
		.gaiheki div.inner div.left {
			width:50%;
			float:left;
		}
			.gaiheki div.inner div.left h2 {
				font-size:24px;
				font-weight:bold;
				color:#674727;
				text-align:center;
				line-height:1.4;
				margin-bottom:40px;
			}
			.gaiheki div.inner div.left h3 {
				font-size:20px;
				font-weight:bold;
				color:#F0972D;
				margin-bottom:20px;
			}
		.gaiheki div.inner img {
			display:block;
			float:right;
			width:42%;
		}

@media screen and (max-width:1039px){
.reform01 {
	padding-top:80px;
}

.reformMenu {
	padding-bottom:60px;
}
		.reformMenu div.right h2 {
			font-size:20px;
			margin-bottom:30px;
		}
			.reformMenu div.right h2 span {
				font-size:50px;
			}
	.reformMenu img {
		width:44%;
	}
	
.reformMenu2 {
	padding-bottom:60px;
}
		.reformMenu2 div.left h2 {
			font-size:20px;
			margin-bottom:30px;
		}
			.reformMenu2 div.left h2 span {
				font-size:50px;
			}
	.reformMenu2 img {
		width:44%;
	}
	
.gaiheki {
	padding:80px 35px 80px 35px;
}
			.gaiheki div.inner div.left h2 {
				font-size:20px;
				margin-bottom:30px;
			}
			.gaiheki div.inner div.left h3 {
				font-size:18px;
			}
		.gaiheki div.inner img {
			width:44%;
		}

}

@media screen and (max-width:767px){
.reform01 {
	padding-top:70px;
}

.reformMenu {
	padding-bottom:50px;
}
	.reformMenu div.right {
		width:100%;
		float:none;
		margin-bottom:40px;
	}
		.reformMenu div.right h2 {
			font-size:18px;
			line-height:1.4;
			margin-bottom:30px;
		}
			.reformMenu div.right h2 span {
				font-size:40px;
				margin-bottom:20px;
			}
	.reformMenu img {
		float:none;
		width:100%;
		max-width:300px;
		margin:0 auto;
	}
	
.reformMenu2 {
	padding-bottom:50px;
}
	.reformMenu2 div.left {
		width:100%;
		float:none;
		margin-bottom:40px;
	}
		.reformMenu2 div.left h2 {
			font-size:18px;
			line-height:1.4;
			margin-bottom:30px;
		}
			.reformMenu2 div.left h2 span {
				font-size:40px;
				margin-bottom:20px;
			}
	.reformMenu2 img {
		float:none;
		width:100%;
		max-width:300px;
		margin:0 auto;
	}
	
.gaiheki {
	padding:70px 25px 70px 25px;
}
		.gaiheki div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:40px;
		}
			.gaiheki div.inner div.left h2 {
				font-size:18px;
				margin-bottom:30px;
			}
			.gaiheki div.inner div.left h3 {
				font-size:16px;
				margin-bottom:20px;
			}
		.gaiheki div.inner img {
			float:none;
			width:100%;
			max-width:300px;
			margin:0 auto;
		}
}

/* !リフォーム実績
---------------------------------------------------------- */
.works01 {
	padding-top:100px;
	padding-bottom:100px;
}

.worksInfo {
	width:100%;
	padding-bottom:80px;
	border-bottom:1px dotted #CCC;
}
	.worksInfo h2 {
		text-align:center;
		margin-bottom:20px;
	}
		.worksInfo h2 span {
			display:inline-block;
			font-size:20px;
			font-weight:bold;
			color:#FFF;
			line-height:1.6;
			padding:0.4em 0.6em;
			background:#442F1A;
		}
	.worksInfo h3 {
		font-weight:bold;
		text-align:center;
		line-height:1.6;
		margin-bottom:40px;
	}
	.worksInfo div.photo {
		width:100%;
	}
		.worksInfo div.photo div.before {
			width:45%;
			float:left;
			position:relative;
		}
			.worksInfo div.photo div.before img {
				display:block;
				width:100%;
				position:relative;
				z-index:1;
			}
			.worksInfo div.photo div.before p {
				position:absolute;
				z-index:2;
				font-family: 'Volkhov', serif;
				font-size:18px;
				font-weight:bold;
				letter-spacing:0.04em;
				color:#FFF;
				line-height:1;
				padding:0.6em 0.8em;
				background:#674727;
				top:-10px;
				left:-10px;
			}
		.worksInfo div.photo div.arrow {
			width:10%;
			float:left;
		}
			.worksInfo div.photo div.arrow img {
				display:block;
				width:40px;
				margin:170px auto 0 auto;
			}
		.worksInfo div.photo div.after {
			width:45%;
			float:right;
			position:relative;
		}
			.worksInfo div.photo div.after img {
				display:block;
				width:100%;
				position:relative;
				z-index:1;
			}
			.worksInfo div.photo div.after p {
				position:absolute;
				z-index:2;
				font-family: 'Volkhov', serif;
				font-size:18px;
				font-weight:bold;
				letter-spacing:0.04em;
				color:#FFF;
				line-height:1;
				padding:0.6em 0.8em;
				background:#F0972D;
				top:-10px;
				left:-10px;
			}
	

@media screen and (max-width:1039px){
.works01 {
	padding-top:80px;
	padding-bottom:90px;
}

.worksInfo {
	padding-bottom:60px;
}
		.worksInfo h2 span {
			font-size:18px;
		}
			.worksInfo div.photo div.before p {
				font-size:17px;
			}
			.worksInfo div.photo div.arrow img {
				width:36px;
				margin:130px auto 0 auto;
			}
			.worksInfo div.photo div.after p {
				font-size:17px;
			}
}

@media screen and (max-width:767px){
.works01 {
	padding-top:70px;
	padding-bottom:70px;
}

.worksInfo {
	padding-bottom:50px;
}
		.worksInfo h2 span {
			font-size:16px;
		}
	.worksInfo h3 {
		margin-bottom:40px;
	}
	.worksInfo div.photo {
		max-width:300px;
		margin:0 auto;
	}
		.worksInfo div.photo div.before {
			width:100%;
			float:none;
			margin-bottom:20px;
		}
			.worksInfo div.photo div.before p {
				font-size:16px;
			}
		.worksInfo div.photo div.arrow {
			width:100%;
			float:none;
			margin-bottom:20px;
		}
			.worksInfo div.photo div.arrow img {
				width:30px;
				margin:0 auto 0 auto;
				transform: rotate(90deg);
			}
		.worksInfo div.photo div.after {
			width:100%;
			float:none;
		}
			.worksInfo div.photo div.after p {
				font-size:16px;
			}
}

/* !よくあるご質問
---------------------------------------------------------- */
.accordion {
	width:auto;
}
		.accordion h2  {
			display:block;
			font-weight:bold;
			line-height:1.6;
			padding:1em 3.2em 1em 4em;
			background:#E7DAD1;
			position:relative;
			cursor:pointer;
			transition: all 0.5s ease;
		}
			.accordion h2:hover{
				background-color: #DDCBBF;
			}
			.accordion h2:before{
				content:"";
				position:absolute;
				display:block;
				width:30px;
				height:30px;
				left:20px;
				top:16px;
				background:url(../../faq/img/icon_q.png);
				background-size:30px 30px;
			}
			.accordion h2 i.fas {
				font-size: 16px;
				line-height:1;
				position: absolute;
				right: 20px;
				top: 20px;
				color: #674727;
				transition: all 0.4s ease;
			}
			.accordion h2.active  i.fas{
				transform: rotateZ(180deg);
				transition: all 0.4s ease;
				top: 21px;
			}
			.accordion div.answer {
				display: none;
				padding:25px 25px 25px 20px;
				background:#F7F1EE;
				position:relative;
			}
				.accordion div.answer p {
					background:url(../../faq/img/icon_a.png) 0 0 no-repeat;
					background-size:30px 30px;
					padding:0 0 0 44px;
				}
@media screen and (max-width:1039px){
		.accordion h2  {
			padding:1em 3em 1em 3.4em;
		}
			.accordion h2:hover{
				background-color: #E7DAD1;
			}
			.accordion h2:before{
				width:26px;
				height:26px;
				left:15px;
				top:16px;
				background:url(../../faq/img/icon_q.png);
				background-size:26px 26px;
			}
			.accordion h2 i.fas {
				right: 15px;
			}
			.accordion h2.active  i.fas{
				top: 21px;
			}
			.accordion div.answer {
				padding:25px 25px 25px 15px;
			}
				.accordion div.answer p {
					background:url(../../faq/img/icon_a.png) 0 0 no-repeat;
					background-size:26px 26px;
					padding:0 0 0 36px;
				}
}

@media screen and (max-width:767px){
			.accordion h2:before{
				left:12px;
				top:12px;
			}
			.accordion h2:after,
			.accordion h2.active:after{
				font-size: 12px;
			}
			.accordion h2 i.fas {
				top: 18px;
			}
			.accordion h2.active  i.fas{
				top: 17px;
			}
			.accordion div.answer {
				padding:25px 15px 25px 12px;
			}
				.accordion div.answer p {
					padding:0 0 0 34px;
				}
}

/* !お問い合わせ
---------------------------------------------------------- */
.telBox {
	max-width:800px;
	background:#F0F0F0;
	padding:30px;
	margin:0 auto 80px auto;
}
	.telBox p {
		text-align:center;
		font-size:18px;
	}
		.telBox p span.number {
			font-size:26px;
			font-weight:bold;
			color:#674727;
			vertical-align:middle;
		}
			.telBox p span.number a {
				color:#674727;
			}
		.telBox p span.tit {
			display:inline-block;
			font-size:12px;
			color:#674727;
			line-height:1;
			padding:0.4em 0.6em;
			border:1px solid #674727;
			margin-right:12px;
			margin-left:20px;
			vertical-align:middle;
		}
		.telBox p.time {
			font-size:14px;
			text-align:center;
		}
		.telBox p br {
			display:none;
		}
			
ul.contactStep {
	width:100%;
	margin:0 auto 55px auto;
}
	ul.contactStep li {
		width:30%;
		float:left;
		margin-right:5%;
	}
		ul.contactStep li:last-child {
			margin-right:0;
		}
		ul.contactStep li.norm {
			display:block;
			height:54px;
			line-height:54px;
			background:#DFCFC4;
			text-align:center;
			font-size:18px;
			font-weight:bold;
			color:#674727;
			position:relative;
		}
			ul.contactStep li.norm:after {
				position:absolute;
				content:"";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 27px 0 27px 27px;
				border-color: transparent transparent transparent #DFCFC4;
				top:0;
				right:-27px;
			}
				ul.contactStep li:last-child.norm:after {
					display:none;
				}
		ul.contactStep li.current {
			display:block;
			height:54px;
			line-height:54px;
			background:#674727;
			text-align:center;
			font-size:18px;
			font-weight:bold;
			color:#FFF;
			position:relative;
		}
			ul.contactStep li.current:after {
				position:absolute;
				content:"";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 27px 0 27px 27px;
				border-color: transparent transparent transparent #674727;
				top:0;
				right:-27px;
			}
				ul.contactStep li:last-child.current:after {
					display:none;
				}

#contactForm {
	width:auto;
	max-width:1000px;
	margin:0 auto;
}

@media screen and (max-width:1039px){
.telBox {
	margin:0 auto 80px auto;
}
	.telBox p {
		font-size:16px;
	}
		.telBox p span.number {
			font-size:24px;
		}
		.telBox p.time {
			font-size:13px;
		}
		.telBox p br {
			display:none;
		}
}

@media screen and (max-width:767px){
.telBox {
	padding:20px;
	margin:0 auto 70px auto;
}
	.telBox p {
		font-size:15px;
	}
		.telBox p span.number {
			font-size:22px;
		}
		.telBox p span.tit {
			margin-left:0;
		}
		.telBox p.time {
			font-size:12px;
		}
		.telBox p br {
			display:block;
		}
		
ul.contactStep {
	margin:0 auto 50px auto;
}
	ul.contactStep li {
		width:28%;
		margin-right:8%;
	}
		ul.contactStep li.norm {
			height:46px;
			line-height:46px;
			font-size:100%;
		}
			ul.contactStep li.norm:after {
				border-width: 23px 0 23px 23px;
				right:-23px;
			}
		ul.contactStep li.current {
			height:46px;
			line-height:46px;
			font-size:100%;
		}
			ul.contactStep li.current:after {
				border-width: 23px 0 23px 23px;
				right:-23px;
			}
	
}