@charset "UTF-8";
/*
 * top_layout.css
 *
 */
 
/* !mainvisual
---------------------------------------------------------- */
.main {
	width: 100%;
	height:550px;
	position: relative;
	padding-top:60px;
	background:url(../../img/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 p img {
		position:absolute;
		display:block;
		width:324px;
		height:290px;
		top:0;
		left:80px;
		-webkit-animation: copy1 2.4s 1 ease;
		-moz-animation: copy1 2.4s 1 ease;
		animation: copy1 2.4s 1 ease ;
	}
	.main ul {
		position:absolute;
		width:55%;
		max-width:700px;
		top:14%;
		right:80px;
	}
		.main ul li {
			position:absolute;
			width:21.21%;
		}
			.main ul li img {
				display:block;
				width:100%;
			}
			.main ul li:first-child {
				top:0;
				left:0;
				-webkit-animation: copy2 3s 1 ease;
				-moz-animation: copy2 3s 1 ease;
				animation: copy2 3s 1 ease ;
			}
			.main ul li:nth-child(2) {
				top:80px;
				left:20%;
				-webkit-animation: copy3 3.3s 1 ease;
				-moz-animation: copy3 3.3s 1 ease;
				animation: copy3 3.3s 1 ease ;
			}
			.main ul li:nth-child(3) {
				top:0px;
				left:40%;
				-webkit-animation: copy4 3.6s 1 ease;
				-moz-animation: copy4 3.6s 1 ease;
				animation: copy4 3.6s 1 ease ;
			}
			.main ul li:nth-child(4) {
				top:80px;
				left:60%;
				-webkit-animation: copy5 3.9s 1 ease;
				-moz-animation: copy5 3.9s 1 ease;
				animation: copy5 3.9s 1 ease ;
			}
			.main ul li:nth-child(5) {
				top:0px;
				left:80%;
				-webkit-animation: copy6 4.2s 1 ease;
				-moz-animation: copy6 4.2s 1 ease;
				animation: copy6 4.2s 1 ease ;
			}

@keyframes bg {
    0% {
        opacity: 0;
    }
	30% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
		
@keyframes copy1 {
    0% {
        opacity: 0;
		top:-80px;
    }
	50% {
        opacity: 0;
		top:-80px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy2 {
    0% {
        opacity: 0;
		top:50px;
    }
	60% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy3 {
    0% {
        opacity: 0;
		top:130px;
    }
	63% {
        opacity: 0;
		top:130px;
    }
	100% {
        opacity: 1;
		top:80px;
    }
}

@keyframes copy4 {
    0% {
        opacity: 0;
		top:50px;
    }
	66% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy5 {
    0% {
        opacity: 0;
		top:130px;
    }
	69% {
        opacity: 0;
		top:130px;
    }
	100% {
        opacity: 1;
		top:80px;
    }
}

@keyframes copy6 {
    0% {
        opacity: 0;
		top:50px;
    }
	72% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@media screen and (max-width:1039px){
.main {
	height:450px;
}
	.main p img {
		width:280px;
		height:251px;
		top:0;
		left:40px;
	}
	.main ul {
		position:absolute;
		width:59%;
		top:13%;
		right:60px;
	}
		.main ul li {
			position:absolute;
			width:22%;
		}
}

@media screen and (max-width:899px){
.main {
	height:400px;
}
	.main p img {
		width:250px;
		height:224px;
		top:0;
		left:40px;
	}
	.main ul {
		position:absolute;
		width:54%;
		max-width:700px;
		top:12%;
		right:50px;
	}
		.main ul li {
			position:absolute;
			width:25%;
		}
}

@media screen and (max-width:767px){
.main {
	height:400px;
}
	.main p img {
		width:220px;
		height:197px;
		top:0;
		left:50%;
		margin-left:-95px;
	}
	.main ul {
		position:absolute;
		width:320px;
		top:220px;
		right:auto;
		left:50%;
		margin-left:-160px;
	}
		.main ul li {
			position:absolute;
			width:20%;
		}
			.main ul li img {
				display:block;
				width:96%;
				margin:0 auto;
			}
			.main ul li:first-child {
				top:0;
				left:0;
			}
			.main ul li:nth-child(2) {
				top:0;
				left:20%;
			}
			.main ul li:nth-child(3) {
				top:0;
				left:40%;
			}
			.main ul li:nth-child(4) {
				top:0;
				left:60%;
			}
			.main ul li:nth-child(5) {
				top:0;
				left:80%;
			}
			
@keyframes copy1 {
    0% {
        opacity: 0;
		top:-60px;
    }
	50% {
        opacity: 0;
		top:-60px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy2 {
    0% {
        opacity: 0;
		top:50px;
    }
	60% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy3 {
    0% {
        opacity: 0;
		top:50px;
    }
	62% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy4 {
    0% {
        opacity: 0;
		top:50px;
    }
	64% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy5 {
    0% {
        opacity: 0;
		top:50px;
    }
	66% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}

@keyframes copy6 {
    0% {
        opacity: 0;
		top:50px;
    }
	68% {
        opacity: 0;
		top:50px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}
}

/* !アニメーション
---------------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 100px);
  transition: 1.6s .4s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* !成共ホーム
---------------------------------------------------------- */
.topCopy {
	width:100%;
	padding:60px 50px 70px 50px;
	background:#F7F6F4;
	position:relative;
}
	.topCopy img {
		display:block;
		width:100px;
		margin:0 auto 50px auto;
	}
	.topCopy p {
		font-size:30px;
		font-weight:bold;
		color:#F0972D;
		line-height:1;
		text-align:center;
		margin-bottom:20px;
	}
		.topCopy p span {
			display:inline-block;
			padding:0 1.1em;
			position:relative;
		}
			.topCopy p span:before {
				position:absolute;
				display:block;
				content:"";
				width:16px;
				height:26px;
				background:url(../../img/top_copy_line01.png) 0 0 no-repeat;
				background-size:16px 26px;
				top:2px;
				left:0;
			}
			.topCopy p span:after {
				position:absolute;
				display:block;
				content:"";
				width:16px;
				height:26px;
				background:url(../../img/top_copy_line02.png) 0 0 no-repeat;
				background-size:16px 26px;
				top:2px;
				right:0;
			}
	.topCopy h2 {
		font-size:40px;
		font-weight:bold;
		text-align:center;
		line-height:1.6;
	}
		.topCopy h2 br {
			display:none;
		}
							
@media screen and (max-width:1039px){
.topCopy {
	padding:50px 0px 60px 0px;
}
	.topCopy img {
		width:80px;
		margin:0 auto 45px auto;
	}
	.topCopy p {
		font-size:26px;
	}
			.topCopy p span:before {
				width:15px;
				height:24px;
				background:url(../../img/top_copy_line01.png) 0 0 no-repeat;
				background-size:15px 24px;
				top:1px;
			}
			.topCopy p span:after {
				width:15px;
				height:24px;
				background:url(../../img/top_copy_line02.png) 0 0 no-repeat;
				background-size:15px 24px;
				top:1px;
			}
	.topCopy h2 {
		font-size:32px;
	}
}

@media screen and (max-width:767px){
.topCopy {
	padding:40px 0px 50px 0px;
}
	.topCopy img {
		width:60px;
		margin:0 auto 40px auto;
	}
	.topCopy p {
		font-size:18px;
		margin-bottom:30px;
	}
			.topCopy p span:before {
				width:12px;
				height:18px;
				background:url(../../img/top_copy_line01.png) 0 0 no-repeat;
				background-size:12px 18px;
				top:0;
			}
			.topCopy p span:after {
				width:12px;
				height:18px;
				background:url(../../img/top_copy_line02.png) 0 0 no-repeat;
				background-size:12px 18px;
				top:0;
			}
	.topCopy h2 {
		font-size:22px;
	}
		.topCopy h2 br {
			display:block;
		}
}

/* !リフォームの流れ
---------------------------------------------------------- */
.topFlow {
	position:relative;
	width:100%;
	padding:70px 50px 100px 50px;
}
	.topFlow div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
	.topFlow h2 {
		font-size:20px;
		font-weight:bold;
		line-height:1.6;
		text-align:center;
		padding-bottom:40px;
		margin-bottom:60px;
		position:relative;
	}
		.topFlow h2 span {
			display:block;
			font-family: 'Volkhov', serif;
			font-size:50px;
			color:#664626;
			letter-spacing:0.04em;
			line-height:1.6;
		}
		.topFlow h2:before {
			position:absolute;
			content:"";
			width:118px;
			height:10px;
			background:url(../../img/flow_tit_bg.png) 0 0 no-repeat;
			background-size:118px 10px;
			bottom:0;
			left:50%;
			margin-left:-59px;
		}
	.topFlow ul {
		width:100%;
	}
		.topFlow ul li {
			width:14.285%;
			float:left;
		}
			.topFlow ul li img {
				display:block;
				width:100%;
			}

@media screen and (max-width:1039px){
.topFlow {
	padding:60px 30px 90px 30px;
}
	.topFlow h2 {
		font-size:18px;
		padding-bottom:35px;
		margin-bottom:50px;
	}
		.topFlow h2 span {
			font-size:44px;
		}
		.topFlow h2:before {
			width:100px;
			height:8px;
			background:url(../../img/flow_tit_bg.png) 0 0 no-repeat;
			background-size:100px 8px;
			margin-left:-50px;
		}
	.topFlow ul {
		max-width:636px;
		margin:0 auto;
	}
		.topFlow ul li {
			width:25%;
			margin-bottom:10px;
		}
			.topFlow ul li img {
				display:block;
				height:100%;
			}
}

@media screen and (max-width:767px){
.topFlow {
	padding:0px 25px 60px 25px;
}
	.topFlow h2 {
		font-size:15px;
		padding-bottom:30px;
		margin-bottom:40px;
	}
		.topFlow h2 span {
			font-size:36px;
		}
		.topFlow h2:before {
			width:80px;
			height:6px;
			background:url(../../img/flow_tit_bg.png) 0 0 no-repeat;
			background-size:80px 6px;
			margin-left:-40px;
		}
	.topFlow ul {
		max-width:320px;
	}
		.topFlow ul li {
			width:50%;
		}
}

@media screen and (max-width:360px){
	.topFlow ul {
		max-width:300px;
	}
}

/* !成共ホームの特長
---------------------------------------------------------- */
.topFeatures {
	position:relative;
	width:100%;
	padding:80px 50px 80px 50px;
	background:url(../../img/feature_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.topFeatures div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
	.topFeatures h2 {
		font-size:20px;
		font-weight:bold;
		color:#FFF;
		line-height:1.6;
		text-align:center;
		margin-bottom:50px;
		position:relative;
	}
		.topFeatures h2 span {
			display:block;
			font-family: 'Volkhov', serif;
			font-size:50px;
			letter-spacing:0.04em;
			line-height:1.6;
		}
	.topFeatures ul {
		width:100%;
		max-width:740px;
		margin:0 auto 40px auto;
	}
		.topFeatures ul li {
			width:30%;
			float:left;
			margin-right:5%;
		}
			.topFeatures ul li:last-child {
				margin-right:0;
			}
			.topFeatures ul li img {
				display:block;
				width:100%;
			}
	.topFeatures p {
		font-weight:bold;
		color:#FFF;
		text-align:center;
	}

@media screen and (max-width:1039px){
.topFeatures {
	padding:70px 30px 70px 30px;
}
	.topFeatures h2 {
		font-size:18px;
		margin-bottom:50px;
	}
		.topFeatures h2 span {
			font-size:44px;
		}
	.topFeatures ul {
		max-width:660px;
	}
	
}

@media screen and (max-width:767px){
.topFeatures {
	padding:60px 25px 60px 25px;
}
	.topFeatures h2 {
		font-size:15px;
		margin-bottom:40px;
	}
		.topFeatures h2 span {
			font-size:36px;
		}
	.topFeatures ul {
		max-width:160px;
		margin:0 auto 40px auto;
	}
		.topFeatures ul li {
			width:100%;
			float:none;
			margin-right:0;
			margin-bottom:20px;
		}
			.topFeatures ul li:last-child {
				margin-bottom:0;
			}
	.topFeatures p {
		text-align:left;
	}
		.topFeatures p br {
			display:none;
		}
}

/* !各種工事行っています
---------------------------------------------------------- */
.topConstruction {
	position:relative;
	width:100%;
	padding:100px 30px 70px 30px;
}
	.topConstruction div.inner {
		width:100%;
		max-width:1200px;
		margin:0 auto;
	}
	.topConstruction h2 {
		font-size:28px;
		font-weight:bold;
		color:#664626;
		line-height:1.6;
		text-align:center;
		margin-bottom:50px;
	}
		.topConstruction h2 span {
			display:inline-block;
			padding:0 1em;
			position:relative;
		}
			.topConstruction h2 span:before {
				position:absolute;
				content:"";
				width:8px;
				height:8px;
				background:#F0972D;
				top:18px;
				left:0;
				transform: rotate(45deg);
			}
			.topConstruction h2 span:after {
				position:absolute;
				content:"";
				width:8px;
				height:8px;
				background:#F0972D;
				top:18px;
				right:0;
				transform: rotate(45deg);
			}
	.topConstruction ul {
		width:100%;
	}
		.topConstruction ul li {
			width:23%;
			height:214px;
			float:left;
			margin-right:2.666%;
			overflow:hidden;
			position:relative;
			margin-bottom:30px;
		}
		.topConstruction ul li:nth-child(4) {
			margin-right:0;
		}
		.topConstruction ul li:last-child {
			margin-right:0;
		}
			.topConstruction ul li div.bg {
				position:absolute;
				width:100%;
				height:100%;
				background-position:50% 50%;
				background-repeat:no-repeat;
				top:0;
				left:0;
				z-index:50;
				transition: all .6s ease-out;
			}
				.topConstruction ul li a:hover div.bg {
					transform: scale(1.1);
				}
				.topConstruction ul li:first-child div.bg {
					background:url(../../img/construction01_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(2) div.bg {
					background:url(../../img/construction02_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(3) div.bg {
					background:url(../../img/construction03_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(4) div.bg {
					background:url(../../img/construction04_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(5) div.bg {
					background:url(../../img/construction05_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(6) div.bg {
					background:url(../../img/construction06_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(7) div.bg {
					background:url(../../img/construction07_img.jpg);
					background-size:cover;
				}
				.topConstruction ul li:nth-child(8) div.bg {
					background:url(../../img/construction08_img.jpg);
					background-size:cover;
				}
			.topConstruction ul li div.mask {
				position:absolute;
				width:100%;
				height:100%;
				background:rgba(63, 44, 24, .75);
				transform: scaleX(0.7) scaleY(0.55);
				top:0;
				left:0;
				z-index:51;
				transition:.6s;
			}
				.topConstruction ul li a:hover div.mask {
					background:rgba(63, 44, 24, .5);
					transform: scale(1);
				}
			.topConstruction ul li img {
				display:block;
				width:60px;
				margin:80px auto 15px auto;
				position:relative;
				z-index:52;
			}
			.topConstruction ul li p {
				display:block;
				font-size:20px;
				font-weight:bold;
				color:#FFF;
				text-align:center;
				line-height:1.6;
				position:relative;
				z-index:52;
			}

@media screen and (max-width:1039px){
.topConstruction {
	padding:80px 20px 60px 20px;
}
	.topConstruction h2 {
		font-size:24px;
		margin-bottom:40px;
	}
			.topConstruction h2 span:before {
				top:15px;
			}
			.topConstruction h2 span:after {
				top:15px;
			}
	.topConstruction ul {
		width:100%;
	}
		.topConstruction ul li {
			height:160px;
			margin-bottom:20px;
		}
				.topConstruction ul li a:hover div.bg {
					transform: scale(1);
				}
				.topConstruction ul li a:hover div.mask {
					background:rgba(63, 44, 24, .75);
					transform: scaleX(0.7) scaleY(0.55);
				}
			.topConstruction ul li img {
				width:50px;
				margin:58px auto 15px auto;
			}
			.topConstruction ul li p {
				font-size:16px;
			}
}

@media screen and (max-width:767px){
.topConstruction {
	padding:60px 20px 50px 20px;
}
	.topConstruction h2 {
		font-size:18px;
		margin-bottom:35px;
	}
			.topConstruction h2 span:before {
				width:6px;
				height:6px;
				top:11px;
			}
			.topConstruction h2 span:after {
				width:6px;
				height:6px;
				top:11px;
			}
	.topConstruction ul {
		width:100%;
		max-width:360px;
		margin:0 auto;
	}
		.topConstruction ul li {
			width:47%;
			height:130px;
			margin-right:6%;
			margin-bottom:20px;
		}
		.topConstruction ul li:nth-child(even) {
			margin-right:0;
		}
			.topConstruction ul li img {
				width:50px;
				margin:46px auto 12px auto;
			}
			.topConstruction ul li p {
				font-size:14px;
			}
}

/* !営業エリア
---------------------------------------------------------- */
.topArea {
	position:relative;
	width:100%;
	background:#FDF4EA;
	padding:70px 50px 100px 50px;
}
	.topArea div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
	.topArea h2 {
		font-size:20px;
		font-weight:bold;
		line-height:1.6;
		text-align:center;
		margin-bottom:50px;
		position:relative;
	}
		.topArea h2 span {
			display:block;
			font-family: 'Volkhov', serif;
			font-size:50px;
			color:#664626;
			letter-spacing:0.04em;
			line-height:1.6;
		}
	.topArea h3 {
		font-size:18px;
		font-weight:bold;
		color:#F0972C;
		line-height:1.6;
		text-align:center;
		margin-bottom:60px;
	}
		.topArea h3 br {
			display:none;
		}
	.topArea div.areaDetail {
		width:100%;
	}
		.topArea div.areaDetail div.left {
			width:50%;
			float:left;
		}
			.topArea div.areaDetail div.left img {
				display:block;
				width:100%;
				border:2px solid #867763;
			}
		.topArea div.areaDetail div.right {
			width:45%;
			float:right;
		}
			.topArea div.areaDetail div.right p {
				font-size:12px;
				line-height:1.6;
			}
	

@media screen and (max-width:1039px){
.topArea {
	padding:60px 30px 90px 30px;
}
	.topArea h2 {
		font-size:18px;
		margin-bottom:40px;
	}
		.topArea h2 span {
			font-size:44px;
		}
	.topArea h3 {
		font-size:16px;
		margin-bottom:50px;
	}
		.topArea h3 br {
			display:block;
		}
}

@media screen and (max-width:767px){
.topArea {
	padding:50px 25px 60px 25px;
}
	.topArea h2 {
		font-size:15px;
		margin-bottom:30px;
	}
		.topArea h2 span {
			font-size:36px;
		}
	.topArea h3 {
		font-size:14px;
		margin-bottom:30px;
	}
		.topArea h3 br {
			display:none;
		}
		.topArea div.areaDetail div.left {
			width:100%;
			float:none;
			margin-bottom:30px;
		}
			.topArea div.areaDetail div.left img {
				max-width:340px;
				margin:0 auto;
			}
		.topArea div.areaDetail div.right {
			width:100%;
			float:none;
		}
			.topArea div.areaDetail div.right p {
				font-size:12px;
				line-height:1.6;
			}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
}

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

}

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

}