@charset "UTF-8";

/* reset */
body{
	margin:0;
	padding:0;
	text-align:left;
	/*font-size:68%;*/
	font-size:1rem;
	line-height:1.6;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
	color:#333333;
	background-color:#fcfcfa;
	min-width:1024px;
}

html,body,h1,h2,h3,h4,h5,p,div,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}

img{
	border-top:0;
	border-right:0;
	border-bottom:0;
	border-left:0;
}

/*--------------------------------------------------------
  layout
--------------------------------------------------------*/

/* hpb-skip */
#hpb-skip{
	display:none;
}

/* hpb-container */
#hpb-container{
	
	position:relative;
	background-image : url(bg_1X_02_01.png);
	background-position:top left;
	background-repeat:repeat-x;
}

/* hpb-header */
#hpb-header{
	min-width:992px;
	margin-left:auto;
	margin-right:auto;
	padding-top:45px;
	padding-left:32px;
	padding-bottom:50px;
	position:relative;
	/*overflow:hidden;*/
	zoom:1;
}

/* hpb-inner */
#hpb-inner{
	/*min-width: 1024px;*/
	min-width: 1250px;
	margin-left:auto;
	margin-right:auto;
	padding-top:24px;
	padding-bottom:30px;
	position:relative;
	/*overflow:hidden;*/
	zoom:1;
}

/* hpb-wrapper */
#hpb-wrapper{
	/*width:820px;*/
	width:100%;
	padding-top:40px;
	/*float:left;*/

}

.hpb-layoutset-02 #hpb-wrapper{
	padding-top:64px;
}

/* hpb-title */
.hpb-layoutset-01 #hpb-title{
	/*width:820px;*/
	width:100%;
	height:600px;
	position:relative;
	background-image : url(top_main.jpg);
	background-size:cover;
	/*background-position:top left;*/
	background-position: center;
	background-repeat:no-repeat;
}

.hpb-layoutset-01 #captain-title{
	/*width:820px;*/
	width:100%;
	height:600px;
	position:relative;
	background-size:cover;
	/*background-position:top left;*/
	background-position: center;
	background-repeat:no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hpb-layoutset-01 #himawari-title{
	/*width:820px;*/
	width:100%;
	height:600px;
	position:relative;
	background-image : url(S__37134868.jpg);
	background-size:cover;
	/*background-position:top left;*/
	background-position: 50% 30%;
	background-repeat:no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* hpb-main */
#hpb-main{
	/*width:618px;*/
	/*padding-left:32px;*/
	width:1100px;
	margin:0 auto;
}

.hpb-layoutset-02 #hpb-main{
	/*width:688px;*/
	width:65%;
	padding-top:16px;
	margin:0 auto;
}


.hpb-layoutset-02 #top-image-service{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("service-main.jpg");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-company{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("top-company.jpg");
	background-size:cover;
	background-position-y:40%;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-recruit{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("recruit-main.jpg");
	background-size:cover;
	background-position-y:center;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-message{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("message-main.jpg");
	background-size:cover;
	background-position-y:center;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-contact{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("kyogyo-trucks.jpg");
	background-size:cover;
	background-position-y:40%;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}


.hpb-layoutset-02 #top-image-electrical{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("electrical-main.jpg");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-himawari{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("himawari-main.jpg");
	background-size:cover;
	background-position:50% 60%;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}

.hpb-layoutset-02 #top-image-captain{
	width:100%;
	height:300px;
	position:relative;
	background-image : url("captain-top.png");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	align-items: center;
	position:relative;
}


.title-box{
	background-color:rgba(255,255,255,0.8);
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	padding:10px 10px;
}

.hpb-layoutset-02 #top-image-captain .title-box img{
	display:block;
	margin:0 auto;
	width:50%;
}

.hpb-layoutset-02 .title-box h2{
	text-align:center;
}

.hpb-layoutset-02 .title-box p{
	color:#084e8e;
}

/* hpb-aside */
#hpb-aside{
	width:192px;
	padding-top:64px;
	float:right;
	display:none;
}

/* hpb-footer */
#hpb-footer{
	min-width:992px;
	margin-left:auto;
	margin-right:auto;
	padding-top:130px;
	padding-bottom:30px;
	padding-left:32px;
	position:relative;
	overflow:hidden;
	zoom:1;
}


/* hpb-nav */
#hpb-nav{
	position:absolute;
	top:-40px;
	/*left:32px;*/
	right:10px;
}

#company img{
	width: 50%;
	margin-left: 10px;
}

/* =======================================================
  ???X?|???V?u?????
======================================================= */
@media screen and (max-width: 568px) {

	body{
		min-width: 100%;
	}

	/*--------------------------------------------------------
	  layout
	--------------------------------------------------------*/
	/* hpb-header */
	#hpb-header{
		min-width: 100%;
		padding-top:0;
		padding-left:0;
		padding-bottom:0;
	}
	/* hpb-inner */
	#hpb-inner{
		min-width: 100%;
		padding-top:24px;
		padding-bottom:30px;
	}
	/* hpb-wrapper */
	#hpb-wrapper{
		width: 100%;
		padding-top: 0;
		float:none;
	}
	.hpb-layoutset-02 #hpb-wrapper{
		padding-top: 0;
	}
	/* hpb-title */
	.hpb-layoutset-01 #hpb-title{
		width:100%;
		height:190px;
		position:relative;
		background-size: contain;
	}
	/* hpb-main */
	#hpb-main{
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-left:0;
		float:none;
		padding-bottom: 20px;
	}
	.hpb-layoutset-02 #hpb-main{
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-top:16px;
	}
	/* hpb-aside */
	#hpb-aside{
		display:block;
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-top:0;
		float:none;
		padding-bottom: 20px;
	}
	/* hpb-footer */
	#hpb-footer{
		min-width:100%;
		padding-top:0;
		padding-bottom:0;
		padding-left:0;
	}
	/* hpb-nav */
	#hpb-nav{
		position:relative;
		top:0;
		left:0;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ddd;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #ddd;
	}

	.hpb-layoutset-02 #top-image-captain .title-box img{
		width:100%;
	}

	.title-box{
		width:100%;
	}

	#company img{
		width: 80% !important;
		margin: 1% 10%;
	}


}