@charset "UTF-8";
/* CSS Document */
/*.nolook{
	display: none;
}*/
header#inside-header.recruit-header, .recruit-header2, .recruit-header3 {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
header#inside-header.eigyo09-header.recruit-header {
background-image: url(../img/title-01-img.jpg);
}
header#inside-header.eigyo09-header.recruit-header2 {
background-image: url(../img/title-02-img.jpg);
}
.pc-staff{
	display: block !important;	
	}
.sp-staff{
	display: none !important;
	}

.work-staff-title {
padding: 1.5em 2em;
margin: 4em auto 2em;
border: 1px solid #FFF;
}
header#inside-header .container h2 {
padding: 1em 0;
width: auto;
margin: 0 auto;
border: none;
}
.work-staff-title h2 {
border: none;
margin: 0;
}
.staff-name {
display: -webkit-flex;
display: flex;
width: 100%;
padding: 0.5em 0;
}
.staff-name .staff-title-no{
display: block;
margin: 0 4% 0 0;
width: 14%;
}
.staff-name .staff-title-name{
width: 72%;
color: #FFF;
display: block;
font-weight: normal;
padding: 0.125em 0.25em;
transition: 0.5s ease-in-out;
}
.staff-name .staff-title-name span {
background-color: rgba(43,73,69,0.50);
display: inline-block;
width: 100%;
padding: 0.5em;
}
header#inside-header.eigyo09-header h2 span a:hover small,
header#inside-header.eigyo09-header h2 span a:focus small {
background-color: rgba(43,73,69,0.90);
}
.syokai {
box-shadow: 1px 1px 3px rgba(0,0,0,0.45);
font-size: 1em;
line-height: 2em;
padding-bottom: 1.5em;	
margin-bottom: 4rem;
}
.syokai .syokai-header {
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
/*padding: 2rem;*/
}
.syokai .syokai-header h1 {
margin-bottom: 10rem;
}
.syokai .syokai-header .r-side {
text-align: right;
}
.syokai .syokai-header .l-side {
text-align: left;
}
.syokai .syokai-header .syokai-name-box {
line-height: 2rem;	
}
.syokai .syokai-header .syokai-name-box p {
display: inline-block;
color: #FFF;
background-color: rgba(43,73,69,0.50);
padding: 1rem 5rem;
text-align: left;
}
/*中途営業のメインビジュアル*/
.syokai .syokai-header.eigyo01 {
background-image: url(../img/staff01-main.jpg);
}


/*中途エンジニアのメインビジュアル*/
.syokai .syokai-header.e01 {
background-image: url(../img/header-engineer-01.jpg);
}

.syokai section {
padding: 2em 6em 1em;
margin-bottom: 1em;
}
.syokai h2:first-child {
margin-top: 2em;
}
.syokai section:last-child {
margin-bottom: 4em;
}

.syokai section h2 {
color: #10635e;
border-bottom: 6px solid #CCC;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.syokai section:nth-child(3) h2 {
width: 50%;
}
.syokai section img.float-r,
.syokai section img.float-l{
width: 45%;
height: auto;
}
.syokai section img.float-r {
float: right;
margin: 0 0 1rem 5%;
}
.syokai section img.float-l {
float: left;
margin: 0 2% 1rem 0;
}
.time, .comment {
	background-color: #eeeeef;
	padding-top:  1.5em;
	padding-right: 2em;
	padding-left: 2em;
	padding-bottom: 2em;
	margin-top: 0;
}
.comment h3{
	color: #10635e;
	font-weight: bold;
}
.comment h3 span{
	color: #333333;
	font-size: 0.8em;
	line-height: 0.6em;
	display: block;
}
.time {
color: #10635e;	
width: 42% !important;
margin-right: 3%;
}
.time h3 {
position: relative;
text-align: center;
z-index: 1;
margin-bottom: 1em;
}
.time h3::after {
position: absolute;
content: '';
display: inline-block;
left: 1em;
right: 1em;
top: 0;
bottom: 0;
background-color: #eeeeef;
z-index: -1;
}
.time h3::before {
position: absolute;
content: '';
display: block;
left: 0;
right: 0;
top: 40%;
width: 100%;
border-bottom: 12px double #CCC;
z-index: -2;
}
.comment {
width: 55% !important;
}
.comment h3 {
padding: 0.5em 0;
font-weight: 200;
font-size: 1.125em;
}
.comment p.p-line {
padding-bottom: 0.5em;
margin-bottom: 1em;
background-image: url(../img/line.png);
background-repeat: repeat-x;
background-position: center bottom;
}
.bottom-dotted {
padding-bottom: 94px;
margin-bottom: 2em;
background-image: url(../img/shigoto/dotted.png);
background-position: center bottom;
background-repeat: no-repeat;
}
.next-go-box{
	margin: 2em 10em 6em;
}
.flex-row.syokai-nav {
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
	margin-bottom: 2em;
	padding-top: 0;
	padding-right: 2em;
	padding-left: 2em;
	padding-bottom: 0;
}
.syokai-nav a {
width: 20%;
height: 250px;
}
.syokai-nav a div {
text-align: center;
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
}
.syokai-nav a div::before {
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(16,57,75,0.20);
z-index: 100;
}
.syokai-nav a div::after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: no-repeat center center;
background-size: cover;
transition: all .3s ease-out;
}
.syokai-nav a div.mech01::after {
background-image: url(../interview/img/next/mech02.jpg);
}
.syokai-nav a div.mech02::after {
background-image: url(../interview/img/next/mech03.jpg);
}
.syokai-nav a div.assist01::after {
background-image: url(../interview/img/next/assist02.jpg);
}
.syokai-nav a div.assist02::after {
background-image: url(../interview/img/next/assist03.jpg);
}
.syokai-nav a div.sale01::after {
background-image: url(../interview/img/next/sale01.jpg);
}
.syokai-nav a div.sale02::after {
background-image: url(../interview/img/next/sale02.jpg);
}
.syokai-nav a div:hover:after,
.syokai-nav a div:focus:after {
opacity: .9;
transform: scale(1.1);
}
.syokai-nav a div:hover::before,
.syokai-nav a div:focus::before {
background-color: rgba(16,57,75,0.00);
}

.syokai-nav a div p {
position: absolute;

}
.syokai-nav a div p.syokai-text {
z-index: 200;
bottom: 1em;
left: 0;
width: 100%;
color: #FFF;
font-size: 1.125em;
text-align: center;
}
.syokai-nav a div p.syokai-img {
z-index: 201;
bottom: 3em;
text-align: left;
width: 50%;	
}

.sp-img {
display: none;
}

@media (min-width:768px) and (max-width:991px) {	
header#inside-header .container h2 {
padding: 0.5em 0.5em;
}
}
@media (max-width:767px) {
.pc-staff{
	display: none !important;	
	}
.sp-staff{
	display: block !important;
	}	
.syokai {
font-size: 0.9rem;
}

.work-staff-title {
margin: 2em auto 0;
width: 80%;
padding: 0.5em 1em;
}
header#inside-header .container h2 {
padding: 0;
border: none;
text-align: center;
margin: 0.5em auto;
}
.syokai .syokai-header .syokai-name-box {
line-height: 1.2rem;
font-size: 0.9em;
}
.syokai .syokai-header .syokai-name-box p {
display: inline-block;
padding: 0.5rem 1rem;
text-align: left;
}
.syokai section {
padding: 2em 1em 1em;
margin-bottom: 1em;
}
.syokai .syokai-header h1 {
margin-bottom: 2rem;
}
.syokai .syokai-header h1 img {
width: 30%;
}
.syokai section h2 {
font-size: 1.25em;
}
.time,
.comment {
width: 100% !important;
margin: 0 auto 2em !important;
}
.next-go-box {
margin: 2em 0 6em
}
	.flex-row.syokai-nav {
		-webkit-flex-direction: row;
		flex-direction: row;
		padding: 0 0;
	}
.syokai-nav a {
width: 46% !important;
margin: 2% !important;
}
.syokai section:nth-child(3) h2 {
width: 100%;
}
.syokai-nav a div p.syokai-img {
width: 35%;
}
.sp-img {
display: block;
margin-bottom: 2em;
}
.pc-img {
display: none;
}

.syokai section img.float-r,
.syokai section img.float-l{
float: none;
width: 100%;
}
}