/*common start*/
#staff .section{
	margin-bottom: 0;
}
/*common end*/

/*contents start*/
#staff .contents{
	border-bottom: solid 1px #dedede;
	padding-bottom: 150px;
}
#staff .contents ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#staff .contents ul li{
	width: 25%;
	margin-top: 100px;
	margin-left: 5%;
}
#staff .contents ul li:first-of-type,
#staff .contents ul li:nth-of-type(2),
#staff .contents ul li:nth-of-type(3){
	margin-top: 0;
}
#staff .contents ul li:first-of-type,
#staff .contents ul li:nth-of-type(4),
#staff .contents ul li:nth-of-type(7){
	margin-left: 0;
}
#staff .contents-details{
	padding: 20px 0;
}
#staff .contents-details p{
	line-height: 1;
	margin-top: 20px;
}
#staff .contents-details p:last-of-type{
	font-size: 1.6rem;
	margin-top: 10px;
}
#staff .contents-thumbnail{
	overflow: hidden;
}
#staff .contents-details-position{
	margin-top: 0!important;
	text-transform: uppercase;
}
#staff .contents-details-position,
#staff .contents-details-proud-title{
	font-size: 1.4rem;
	color: #bfd63e;
}
#staff .contents-details-name p:first-of-type{
	font-size: 2rem;
}
/*マスクアニメーション*/
.maskBox {
  width: 100%;
	height: 100%;
	overflow: hidden;	
}
.maskBox .maskBox-inner {
  width: inherit;
  height: inherit;
	opacity: 0;	
}
/*boxInnerをスライドインする*/
@keyframes play {
  from {
    transform: translateX(-100%);
  }  
  to {
    transform: translateX(0);
  }
}
/*マスク要素をスライドアウトする*/
@keyframes maskOut {
  from {
    transform: translateX(0);
  }  
  to {
    transform: translateX(100%);
  }
}
/*スライドインを動作するclass*/
.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
/*isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}
/*contents end*/




@media screen and (max-width:767px){
	body{
		font-size: 1.3rem;
  }
  .inner{
		box-sizing: border-box;
		max-width: 90%;
		padding: 0;
		margin: 0 auto;
  }
  img{
		width: 100%;
		height: auto;
  }
  .pcOnly{
		display: none;
  }
  .spOnly{
		display: block;
  }
	
	/*common start*/
	
	/*common end*/
	
	/*contents start*/
	#staff .contents{
		padding-bottom: 80px;
	}
	#staff .contents ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}
	#staff .contents ul li{
		width: 100%;
		margin-top: 50px;
		margin-left: 0;
	}
	#staff .contents ul li:first-of-type,
	#staff .contents ul li:nth-of-type(2),
	#staff .contents ul li:nth-of-type(3){
		margin-top: 50px;
	}
	#staff .contents ul li:first-of-type,
	#staff .contents ul li:nth-of-type(4),
	#staff .contents ul li:nth-of-type(7){
		margin-left: 0;
	}
	#staff .contents ul li:first-of-type{
		margin-top: 0;
	}
	#staff .contents-details{
		padding: 20px 0;
	}
	#staff .contents-details p{
		line-height: 1;
		margin-top: 15px;
	}
	#staff .contents-thumbnail{
		overflow: hidden;
	}
	#staff .contents-details-position{
		margin-top: 0!important;
	}
	#staff .contents-details-position,
	#staff .contents-details-proud-title{
		color: #bfd63e;
	}
	#staff .contents-details-name{
		display: flex;
		align-items: flex-end;
	}
	#staff .contents-details-name p:first-of-type{
		font-size: 1.6rem;
	}
	#staff .contents-details-name p:last-of-type{
		font-size: 1.4rem;
		margin-left: 10px;
	}
	/*contents end*/

	

	
	
	
	}