@charset "utf-8";
/* CSS Document */
/*=====================================================================================
***************************************************************************************

　　MV
		
***************************************************************************************
=====================================================================================*/
#mv{margin-top: 100px; position: relative;}
#mv h2{
	position: absolute;
	left: 50px;
	bottom: 50px;
	z-index: 2;
}

/* スライドレールの枠 */
.img_wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.content {
	width: 800px;
	height: 800px;
	margin-right: 100px;
}
.content img{width: 100%;}

/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 50s infinite linear 0s both;
  animation: loop-slide 50s infinite linear 0s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


@media screen and (max-width: 700px){
	.content {
		width: 500px;
		height: 500px;
		margin-right: 80px;
	}
	#mv{margin-top: 70px;}
	#mv h2{
		left: 20px;
		bottom: 20px;
	}
	#mv h2 img{width: 280px;}

}


/*=====================================================================================
***************************************************************************************

　　会社概要
		
***************************************************************************************
=====================================================================================*/
#contents01{
	display: flex;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	padding: 240px 0 220px;
}

#contents01 .left{width: 320px; margin-right: 7%;}

#contents01 .left h2{margin-bottom: 60px;}
#contents01 .left p{text-align: justify; margin-top: 20px;}
#contents01 .right{
	flex: 1;
	border-radius: 5px;
	overflow: hidden;
}
#contents01 .right img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a.blue{
	width: 200px; 
	line-height: 50px;
	display: inline-block;
	background: #04b9f5;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	margin-top: 40px;
}

@media screen and (max-width: 700px){
	#contents01{display: block; padding: 80px 0 100px;}
	#contents01 .left{width: 90%; margin-right: 0; margin:0 auto 40px;} 
	#contents01 .left h2{margin-bottom: 50px;}
	#contents01 .left p{margin-top: 10px;}
	a.blue{margin-top: 20px;}
}




/*=====================================================================================
***************************************************************************************

　　仕事紹介
		
***************************************************************************************
=====================================================================================*/
#contents02 {
	background: url("../img/contents02_bg.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	padding: 130px 0 180px;
}
#contents02 .box{
	display: flex;
	max-width: 1080px;
	width: 90%;
	margin: 0 auto;
	align-items: center;
}

#contents02 .left{width: 320px; margin-right: 7%;}

#contents02 .left h2{margin-bottom: 60px;}
#contents02 .left p{text-align: justify; margin-top: 20px; color: #FFFFFF;}
#contents02 .right{
	flex: 1;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
}


@media screen and (max-width: 700px){
	#contents02 {padding: 100px 0 110px;}
	#contents02 .box{display: block;}
	#contents02 .left{width: 90%; margin-right: 0; margin:0 auto 40px;} 
	#contents02 .left h2{margin-bottom: 50px;}
	#contents02 .left p{margin-top: 10px;}
	#contents02 .right{display: block;}
	#contents02 .right a{display: inline-block; margin-bottom: 20px;}
}


/*=====================================================================================
***************************************************************************************

　　コンテンツ
		
***************************************************************************************
=====================================================================================*/
#contents03 {
	display: flex;
	padding: 150px 0 0;
	max-width: 1560px;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
}

#contents03 a{
	width: 48%;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#contents03 a.recruit{background: url("../img/recruit_bg.jpg") no-repeat; background-size: cover;}
#contents03 a.contact{background: url("../img/contact_bg.jpg") no-repeat; background-size: cover;}


@media screen and (max-width: 920px){
	#contents03 {display: block;}
	#contents03 a{width: 100%; margin-bottom: 30px;}
}

@media screen and (max-width: 700px){
	#contents03 {padding: 100px 0 0;}
	#contents03 a{height: 200px;}
	#contents03 a.recruit img{width: 140px;}
	#contents03 a.contact img{width: 250px;}
}