html{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}


body{
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color:rgba(211,211,205,1.00);
	-webkit-text-size-adjust:100%;


}

img {
	}


/*----------　PC用　----------*/

@media screen and (min-width:769px){

.br_sp{
display: none;
}

.sp_view{
display: none;
}

	
	.wrapper{
		width:80%;
		height:100%;
		margin: 0 auto;
		min-width: 769px;
		max-width: 1300px;
	}

	.header{
		width:100%;
	}
	
	.header_logo{
		width:20%;
		height:100%;
		padding-top: 10px;
		margin-bottom: 20px;
		margin: 0 auto 20px;
	}
	
	.header img{
		height:100%;
		width: 100%;
	}
	
	.menu{
		height:30px;
		margin-bottom: 30px;
		width: auto;

	}

	.menu_link{
		width: auto;
		height: 2em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	

	
	.btn{
			margin-right: 20px;
	position: relative;
		overflow: hidden;
		cursor: pointer;
	}	
	


	.btn a{
		color:rgba(211,211,205,1.00);
  text-decoration: none;

	}
	
	.btn img {
		width: 103%;
		height:17px;
		background-color:rgba(211,211,205,1.00);
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
}



.btn img:nth-of-type(1) {
position: absolute;
bottom: 0;
		opacity: 0;
}

.btn:hover img:nth-of-type(1) {
		opacity: 1;
}
	
	
.btn:hover img:nth-of-type(2) {
		opacity: 0;
}
	

/*リクルートページボタン*/

	.btn_rec{
	margin-right: 20px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	}	
	


	.btn_rec a{
	color:rgba(211,211,205,1.00);
	text-decoration: none;

	}
	
	.btn_rec img {
	width: 103%;
	height:15px;
	background-color:rgba(211,211,205,1.00);
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}



.btn_rec img:nth-of-type(1) {
	position: absolute;
	bottom: 0;
	opacity: 0;
}

.btn_rec:hover img:nth-of-type(1) {
	height:15px;
	opacity: 1;
}
	
	
.btn_rec:hover img:nth-of-type(2) {
	height:15px;
	opacity: 0;
}






/*----------　recruit PC　----------*/

.recruit{
	width:100%;
	align-content: space-around;
	font-size: 1.1em;
	line-height: 1.7em;
	color: #272727;
}	

.recruit_picspace{
display: flex;
	width:100%;
flex-wrap: wrap;
justify-content: center;
margin: 30px 0 70px;


}

.recruit_picspace img{

	width:31%;
	padding: 1%;
}

.recruit_logo{
width: 35%;
margin-top: 40px;
text-align: center;

}

.recruit h1{
	font-size: 150%;
	font-weight: 800;
	line-height: 1.8em;
	margin: 50px 0;
}	


.recruit h2{
	font-weight:600;
	font-size: 120%;
	line-height: 1.5em;
	margin-bottom: 30px;
}	

.recruit p{
	font-size: 1em;
	line-height:1.5em;
	margin-top: 20px;
}

.recruit_officeimg{
margin:  0 0 50px;
}

.recruit_600{
position: static;
	font-size: 1.2em;
	font-weight: 600;
	margin-top: 50px;
	margin-bottom: 15px;
	border-bottom: solid 1px  rgba(158,158,158,1.00);
}

.recruit_800{
	font-size: 1.8em;
	font-weight: 600;
	margin-top: 90px;
}



.recruit_button{
margin: 150px 0 130px;
text-align: center;
}

.recruit_button a{
  background-color: #2f4858;
  color: #fff;
  padding: 20px 40px;
  text-decoration: none;
  font-size: 1em;
  transition: .5s;
  border-radius: 5px;
}

.recruit_button a:hover{
  color: #fff;
  opacity: 0.5;
}

.minitext{
font-size: 0.8em;
}

.marker {
  background-image: linear-gradient(transparent 60%, #a0bbcd 0%);
}


.recruit_column{
  display: flex;
  justify-content: space-between;
  padding: 3px;
  margin-bottom: 30px;
}

.recruit_column p{
  background-color:white;
  padding: 20px;
  width: 42%;
  font-size: 85%;
  border-radius: 13px;
  margin:30px 0px ;
}

.recruit_column a{
  display: flex;
  justify-content: center;
}
.recruit_column img{
  width: 55%;
}

/*----------　works PC　----------*/

#top_works{
text-align: center;
}

.top_works_img{
width: 30%;
margin:30px 0 50px 0 ;

}

.works{
		width:100%;
		display: flex ;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-around;

}	
	


.works_card{
		width: 32%;
		height: auto;
		margin-bottom: 50px;
/*		background-color: black;*/
}	

.works_card_nolink{
		width: 32%;
		height: auto;
		margin-bottom: 50px;
/*		background-color: black;*/
}	

.works_card_nolink img{
		width: 100%;
	}
	

.works_card img{
		width: 100%;
		background-color: rgba(211,211,205,1.00);
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	}
	
.works_card img:nth-of-type(2) {
		width: 100%;
		padding-top: 5px;
/*		height: 10%;*/
		background-color: rgba(211,211,205,1.00);
}

.works_card img:hover{
		width: 100%;
		opacity: 0.7 ;
	}
	
.works_card:hover img:nth-of-type(2) {
		opacity: 1 ;
		width: 100%;
}

.works_card_none{
	width: 32%;
	height: auto;
	margin-bottom: 50px;
}	

	.works_card_none img{
		width: 100%;
		height: auto;
}	


  /*----------　footer PC　----------*/

	.footer{
		height:9%;
		width:100%;

	}
	
	.footer_copy{
		height:100%;
		display: flex;
		align-items: center;
		padding-top: 30px;
}
	
	.footer_copy p{

		font-size: 10px;
		
	}
	

	}

/*----------　スマホ用　----------*/

@media screen and (max-width:768px){
.pc_view{
display: none;
}



	.wrapper{
		width:100%;
		margin: 0 auto;
	}

	.header{
		width:80%;
		overflow: hidden;
		margin: 0 auto;
}
	
	.header_logo{
		text-align: center;
		margin-top: 30px;
		margin-bottom: 70px;

}
	
	.header img{
		width: 60%;
	}
	

	.menu{
		width: 90%;
		height:30px;
		margin: 0 auto 90px;
	}

	.menu_link{
	width: 100%;
		justify-content: center;
		margin-bottom: 20px;
		display: flex;
}
	
	.menu_link img{
		height:100%;
		width:auto;
		align-items: center;
/*
		padding-right: 15px;
		padding-left: 15px;
*/
	}


	.btn{
		width: 100%; 
		height:20px;
		margin: 30px 0;	
		
		}	
	


	.btn a{
  text-decoration: none;

	}
	
	.btn img {
		width: 100%; 
		height:20px;
		margin: 0px 0px;
}


/*----------　recruit SP　----------*/

.recruit{
    width: 93%;
    margin: 0 auto;
}	

.recruit_logo{
width: 100%;
margin-top: 50px;
text-align: match-parent;

}

.recruit h1{
	font-size: 145%;
	font-weight: 800;
	line-height: 1.8em;
	margin: 50px 0;
}	


.recruit h2{
	font-weight:600;
	font-size: 120%;
	line-height: 1.5em;
	margin-bottom: 30px;
}	

.recruit p{
	font-size: 1em;
	line-height:1.5em;
	margin-top: 20px;
}

.recruit_officeimg{
margin: 50px 0;

}

.recruit_600{
	font-size: 1.2em;
	font-weight: 600;
	margin-top: 50px;
	margin-bottom: 15px;
	border-bottom: solid 1px  rgba(158,158,158,1.00);
}

.recruit_800{
	font-size: 1.8em;
	font-weight: 600;
	margin-top: 90px;
}


.recruit_button{
margin: 100px 0 60px;
text-align: center;
}

.recruit_button a{
  background-color: #2f4858;
  color: #fff;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 1em;
  transition: .5s;
  border-radius: 5px;
}

.recruit_button a:hover{
  color: #fff;
  opacity: 0.5;
}

.minitext{
font-size: 0.8em;
}

.marker {
  background-image: linear-gradient(transparent 60%, #a0bbcd 0%);
}

.recruit_column{
  display: auto;
  padding: 3px;
}

.recruit_column p{
  background-color:white;
  padding: 20px;
  width: 90%;
  border-radius: 13px;
  margin:30px 0px ;
}

.recruit_column a{
  display: flex;
  justify-content: center;
}
.recruit_column img{
  width: 70%;
}


.recruit_picspace{
display: flex;
	width:100%;
flex-wrap: wrap;
justify-content: center;
margin: 30px 0 70px;
}

.recruit_picspace img{

	width:47%;
	padding: 1%;
}


/*----------　works SP　----------*/

#top_works{
text-align: center;
}

.top_works_img{
width: 30%;
margin:50px 0 30px 0 ;

}

	.works{
		width: 90%;
		margin: 0 auto;

}	
	

	.works_card{
		height: auto;
		text-align: center;
		margin-bottom: 40px;
}	


	.works_card img{
		width: 100%;
		height: auto;
		background-color: rgba(211,211,205,1.00);
		text-align: center;
}

	.works_card_nolink{
		height: auto;
		text-align: center;
		margin-bottom: 40px;
}	

	.works_card_nolink img{
		width: 100%;
		height: auto;
		background-color: rgba(211,211,205,1.00);
		text-align: center;
		}
	
	
	
.works_card img:nth-of-type(2) {
		padding-top: 5px;
		height: 10%;
		background-color: rgba(211,211,205,1.00);
}	

		

	.footer{
		height:9%;
		width:90%;
		margin: 0 auto ;

	}
	
	.footer_copy{
		height:100%;
		display: flex;
		align-items: center;
		padding-top: 30px;
		margin-bottom: 20px;
}
	
	.footer_copy p{

		font-size: 7px;
		
	}
	
	}