@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------
 スタッフ紹介PC
 --------------------------------------------- */
.max399{
	display:none;
}
.staff .main_box p{
	width: 100%;
	font-size:80%;
}
.staff .staff_box{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -5px 5px;
}
.staff .main_box .grid{
	width: 50%;
	position: relative;
	overflow: hidden;
}
.staff .main_box .grid:before{
	content: "";
    display: block;
	padding-top: 100%;
}
.staff .main_box .grid .grid_a{
	position: absolute;
    top: 0;
    left: 0;
	right:0;
	margin:auto;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 5px auto;
    overflow: hidden;
	border-radius:10px;
}
.staff .main_box .lead_box{
	font-size: unset;
	width:100%;
}
.staff .main_box .lead_box:last-child{
	display: none;
}
.staff .main_box .lead_box:before{
	padding-top:unset;
}
.staff .main_box .lead_box .grid_a{
	display: flex;
    align-items: center;
	position:unset;
	width:90%;
	margin:100px auto;
	height:unset;
}
.staff .main_box .lead_box .grid_a div{
	max-width:500px;
	margin:auto;
}
.sub section#subContainer .main_box .staff_box .lead_box .grid_a h4{
	font-size: 1.4rem;
    border-bottom: none;
    margin: 0 0 2em 0;
	padding: 0;
	text-align:center;
}
.staff .main_box .lead_box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left;
}
.staff .main_box .grid .grid_b{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.staff .main_box .grid .grid_text,.staff .main_box .grid .grid_img{
	width: 50%;
	position: relative;
	overflow: hidden;
}
.staff .main_box .grid .grid_text:before{
	content: "";
    display: block;
	padding-top: 100%;
}
.staff .main_box .grid .grid_text h5{
	font-size: 110%;
	font-weight: bold;
	white-space: nowrap;
}
.staff .main_box .grid .grid_text{
	background: #faf6f1;
}
.staff .main_box .s_con .grid_text,
.staff .main_box .r_con .grid_text,
.staff .main_box .cs .grid_text{
	background: #e4e4de;
}
.staff .main_box .grid .grid_img:nth-child(3):before{
	content: "";
    display: block;
	padding-top: 100%;
	padding-right: 100%;
	background-color: #28335d;
    opacity: 0.3;
    position: absolute;
}
.staff .main_box .grid .grid_img:nth-child(3):before{
	background-color: #28335d;
	opacity: 0.3;
}
.staff .main_box .s_con .grid_img:nth-child(3):before,
.staff .main_box .r_con .grid_img:nth-child(3):before,
.staff .main_box .cs .grid_img:nth-child(3):before{
	background-color: #700;
	opacity: 0.3;
}
.staff .main_box .grid .grid_text > div{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.staff .main_box .grid .grid_text .grid_text_intro{
	width: calc(100% - 15%);
}

@media screen and (max-width:768px){
	.staff .main_box p{
		font-size: unset;
		width: 100%;
	}
	.staff .main_box .grid{
		width: 100%;
		margin-bottom:10px;
	}
	.staff .main_box .lead_box:before {
		padding-top: 50%;
	}
	.staff .main_box .r_con .grid_text{
	}
	.staff .main_box .qc .grid_text{
	}
	.staff .main_box .r_con .grid_img:nth-child(3):before{
		background-color: #28335d;
	}
	.staff .main_box .qc .grid_img:nth-child(3):before{
		background-color: #700;
	}
}

@media screen and (max-width:499px){
	.staff .main_box .lead_box:nth-child(1):before{
		padding-top: 75%
	}
}

@media screen and (max-width:419px){
	.staff .main_box .lead_box:nth-child(1):before{
		padding-top: 100%
	}
	.staff .main_box .lead_box .grid_a div {
		padding: 7%;
	}
	.staff .main_box .grid .grid_text:nth-child(1){
		background-size: 100%;
	}
	.staff .main_box .grid .grid_text:nth-child(1):before{
		background-color: #28335d;
		opacity: 0.3;
	}
	.staff .main_box .s_con .grid_text:nth-child(1):before,
	.staff .main_box .qc .grid_text:nth-child(1):before,
	.staff .main_box .cs .grid_text:nth-child(1):before{
		background-color: #700;
		opacity: 0.3;
	}
	.staff .main_box .s_des .grid_text:nth-child(1){
		background-image: url(/company/img/staff/s_des_sub.webp);
	}
	.staff .main_box .s_con .grid_text:nth-child(1){
		background-image: url(/company/img/staff/s_con_sub.webp);
	}
	.staff .main_box .r_con .grid_text:nth-child(1){
		background-image: url(/company/img/staff/r_con_sub.webp);
	}
	.staff .main_box .qc .grid_text:nth-child(1){
		background-image: url(/company/img/staff/qc_sub.webp);
	}
	.staff .main_box .tec .grid_text:nth-child(1){
		background-image: url(/company/img/staff/tec_sub.webp);
	}
	.staff .main_box .cs .grid_text:nth-child(1){
		background-image: url(/company/img/staff/cs_sub.webp);
	}
	.staff .main_box .grid .grid_img:nth-child(3){
		display: none;
	}
	.staff .main_box .grid .grid_text:nth-child(4){
		width: 100%;
	}
	.staff .main_box .grid .grid_text:nth-child(4):before{
		padding-top: 50%;
	}
}
@media screen and (max-width:399px){
	.max399{
		display: block;
	}
}