/* CSS Document */
/*スライドショー*/

.top-image{
	width: 100%;
	position: relative;
	z-index: 6!important;
	margin: 0 auto;
}
.top-image .slider{
	margin: auto;
	width: 100%;
}
.top-image .slider-img img {
  height: auto;
  width: 100%;
}
.top-image .Catch{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width: 40%;
	max-width: 450px;
	margin: auto;
	z-index: 2;
        filter: drop-shadow(5px 5px 5px #000);
}


.top-image .photo img{
	width: 100%;
	height: auto;
}

@media print , screen and (min-width:1px) and (max-width: 960px) {
.top-image{
	margin: 60px auto 0;
	position: relative;
}
}
@media print , screen and (min-width:1px) and (max-width: 768px) {
.top-image .Catch{
	width: 55%;
	left: 2%;
}
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

}

h2{
	padding: 3% 0 5%;
	letter-spacing: 0;
}
h2 span.en{
	color: #3f94c8;
	text-align: center;
	display: block;
	font-size: clamp(1.6rem, 2vw, 2rem);
	line-height: 1.8em;
}

/*事業内容*/
.business{
	background: url("../img/top/business_back.png") center center no-repeat;
	background-size: cover;
	padding: 8% 0;
}
.business h2{
	color: #fff;
}
.business p{
	color: #fff;
	text-align: center;
	margin: 3% auto 5%;
}
.business .btn{
	max-width: 280px;
	width: 70%;
	margin: auto;
}

/*会社情報*/
.company{
	background: url("../img/top/company_back.png") center center no-repeat;
	background-size: cover;
	position: relative;
}
.company .txt{
	width: 50%;
	text-align: center;
	padding: 10% 0;
}
.company .photo{
	position: absolute;
	right: 10%;
	top: -15%;
	width: 40%;
}
.company .photo .com01{
	width: 80%;
	max-width: 550px;
	margin: 0 auto 2% 0;
}
.company .photo .com02{
	width: 80%;
	max-width: 500px;
	margin: 0 0 0 auto;
}
.company p{
	text-align: center;
	margin: 3% auto 5%;
}
.company .btn{
	max-width: 280px;
	width: 70%;
	margin: auto;
}


/*施工実績*/
.example{
	background: url("../img/top/ex_back.png") center center no-repeat;
	background-size: cover;
	position: relative;
}
.example .txt{
	width: 50%;
	text-align: center;
	padding: 10% 0;
}
.example .photo{
	position: absolute;
	right: 10%;
	top: -10%;
	width: 40%;
}
.example .photo .ex01{
	width: 75%;
	max-width: 500px;
	margin: 0 0 2% auto;
}
.example .photo .ex02{
	width: 75%;
	max-width: 450px;
	margin: 0 auto 0 0;
}
.example p{
	text-align: center;
	margin: 3% auto 5%;
}
.example .btn{
	max-width: 280px;
	width: 70%;
	margin: auto;
}

/*事業内容*/
.recruit{
/*	background: url("../img/top/recruit_p.png") top center no-repeat;
	background-size: cover;
	padding: 30% 0 2%;*/
	margin: 0 auto;
}
.recruit h2{
	text-align: center;
}
.recruit .btn{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5%;
	display: inline-block;
	background: rgba(255,255,255,0.7);
	padding: 10px 30px;
	width:80%;
	max-width: 430px;
	text-align: center;
	margin: auto;
		
}
.recruit .btn a{
	max-width: 320px;
	width: 80%;
	display: block;
	margin: auto;
}

.contact{
	margin: 5% auto 8%;
}
.contact p{
	text-align: center;
	margin: 20px auto;
}

.contact .btn a{
	max-width: 320px;
	width: 80%;
	display: block;
	margin: auto;
}



@media print , screen and (min-width:1px) and (max-width: 768px) {

.recruit .btn{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: inline-block;
	background: rgba(255,255,255,0.7);
	padding: 0 20px 10px;
	width:100%;
	max-width: 430px;
	text-align: center;
	margin: auto;
		
}
.recruit .btn h2{
	margin: 0px auto;
}
.company .txt{
	width: 100%;
	text-align: center;
	padding: 10% 0;
}
.company .photo{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	right: inherit;
	top: inherit;
	width: 100%;
}
.company .photo .com01{
	width: 48%;
	margin: 0 0 3% auto;
}
.company .photo .com02{
	width: 48%;
	margin: 15% auto 0 0;
}
	
.example{
	padding-bottom: 5%;
}
.example .txt{
	width: 100%;
	text-align: center;
	padding: 10% 0 0;
}
.example .photo{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	right: inherit;
	top: inherit;
	width: 100%;
}
.example .photo .ex01{
	width: 48%;
	margin: 20% auto 0 0;
	padding: 10px;
	order: 2;
}
.example .photo .ex02{
	width: 48%;
	padding: 0px 10px 10px 0;
	margin: -5% 0 3% auto;
	order: 1;
}
}

@media print , screen and (min-width:1px) and (max-width: 630px) {

	.recruit{
		text-align: center;
		background: #3f94c8;
		padding-bottom: 30px;
	}
.recruit .btn{
	position: relative;
	left: inherit;
	right: inherit;
	bottom: inherit;
	padding: 0 20px 30px;
	width:90%;
	text-align: center;
	margin: auto;
	margin-top: -10%;
	background: #fff;
	border: 1px solid #3f94c8;
		
}
}