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

/* 社員を知ろう　 employees.html
----------------------------*/



/* ヘッダー帯部分
----------------------------*/

header#another {
	position: static;
	width: 100%;
	background: rgba(0,0,0,0.3);
}




/* トップビジュアル
----------------------------*/

.bg_employees {
	background: url("../img/bg_emp.jpg") no-repeat top 20% center / cover;
}

div.contaner_ptop {
	position: relative;
	max-width: 1100px;
	height: 290px;
	margin: 0 auto;
	display: flex;
	align-items: center; /* 縦方向中央揃え */
	justify-content: center; /* 横方向中央揃え */
}

div.sub_contaner_ptop {
	margin: 0 auto;
	max-width: 560px;
	height: 100px;
	/*background: rgba(255,0,0,0.3);*/
}


div.sub_contaner_ptop img.t_logo {
	width: 192px;
	vertical-align: middle;
	margin: 0 30px 0 0px;
}

div.sub_contaner_ptop h1 {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	filter: drop-shadow(0px 0px 6px rgba(0,0,0,1.0));
	/*background: rgba(237,200,200,0.8);*/
}


/* ########### 1600px以上 ########### */
@media (min-width: 1600px) {

}

/* ########### 620px以下 ########### */
@media (max-width: 620px) {
div.contaner_ptop {
	height: 200px;
}
div.sub_contaner_ptop {
	height: 158px;
}
div.sub_contaner_ptop img.t_logo {
	display: block;
	margin: 20px auto 10px;
}
	
div.sub_contaner_ptop h1 {
	text-align: center;
	font-size: calc(90% + 2vw);
}

}




div.contaner_emp {
	min-height: 100px;
}



div.contaner_emp h2 {
	margin: 50px 20px 0;
	font-size: 32px;
	font-weight: 700;
	color: #3B698B;
	text-align: center;
}

div.contaner_emp p {
	margin: 20px 10px 0;
	text-align: center;
	font-size: 20px;
	line-height: 28px;
	font-weight: 300;
	color: #3C3C3C;
}





/* 「ものづくり」の現場で活躍している日研トータルソーシングのエンジニア
----------------------------*/

.f_box {
	display: flex;
	justify-content: center;
}
.f_box2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.emp_con1 {
	max-width: 1160px;
	margin: 40px auto 150px;
	padding: 0 30px;
	/*background: rgba(237,80,80,0.3);*/
}

/* Coming Soon用の設定
----------------------------*/
.csn {
	position: relative;
}
.csn p.cst {
	position: absolute;
	left: 0;
	top: 200px;
	width: 100%;
	font-size: 30px;
	color: #3B6986;
	text-align: center;
	/*background: rgba(237,80,80,0.3);*/
}

/* ########### 1100px以下 ########### */
@media (max-width: 1100px) {
.csn p.cst {
	top: 28%;
}
}
/* ########### 760px以下 ########### */
@media (max-width: 760px) {
.csn p.cst {
	top: 18%;
	font-size: 4vw;
}
}
/* ########### 430px以下 ########### */
@media (max-width: 430px) {
.csn p.cst {
	top: 12%;
	font-size: 5vw;
}
}

img.csoon {
	width: 100%;
	margin: 5% 0 0;
}

.emp_con1_wrap {
	flex-basis: 76%;
	/*background:  rgba(239,215,0,0.5);*/
}

.emp_con1_wrap2 {
	flex-basis: 24%;
	padding: 0 0 0 4%;
	/*background:  rgba(237,80,80,0.5);*/
}

.emp_con1_wrap2 h3 {
	line-height: 24px;
	font-size: 29px;
	font-weight: 700;
	color: #595858;
}

.emp_con1B_wrap {
}
.emp_con1C_wrap {
	padding: 70px 0 0;
	/*background:  rgba(237,80,80,0.5);*/
}

.emp_ps_wrap {
	position: relative;
	flex-basis: 32%;
	/*margin: 0 2% 2% 0;*/
	margin: 0 0 2%;
}
/*.emp_ps_wrap:last-child {
	margin: 0;
}*/

.emp_ps_wrap img {
	width: 100%;
	display: block;
}
.emp_con1_wrap dl {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	background: rgba(59,105,139,0.3);
}

.emp_con1_wrap dt {
	font-size: 24px;
	font-weight: 500;
	/*background: rgba(237,80,80,0.5);*/
}

.emp_con1_wrap dd {
	margin: 0 0 2%;
	font-size: 12px;
	line-height: 12px;
	font-weight: 300;
}

.emp_con1_wrap span {
	display: inline-block;
	width: 45%;
	margin: 0.5%;
	padding: 1% 0;
	line-height: 140%;/*縦の高さ*/
	
}

span.c1 {
	background: #7DB28E;
}
span.c2 {
	background: #8CC5D4;
}
span.c3 {
	background: #3771B8;
}
span.c4 {
	background: #7363A6;
}


/* ########### 1140px以上 ########### */
@media (min-width: 1140px) {


br.d_terms {
	display: none;
}
}

/* ########### 1060px以下 ########### */
@media (max-width: 1060px) {


br.c_terms {
	display: none;
}
}

/* ########### 900px以下 ########### */
@media (max-width: 900px) {
.emp_con1_wrap dt {
	font-size: calc(30% + 1.6vw);
}
.emp_con1_wrap dd {
	font-size: calc(16% + 1vw);
}

}

/* ########### 700px以下 ########### */
@media (max-width: 700px) {
.emp_ps_wrap {
	position: relative;
	flex-basis: 49%;
}


}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
.f_box {
	display: flex;
	flex-direction: column;
}

.emp_con1 {
	margin: 4vw auto 30%;
	padding: 0 4%;
}

.emp_con1_wrap dt {
	font-size: calc(60% + 1.6vw);
}
.emp_con1_wrap dd {
	font-size: calc(30% + 1.6vw);
}

.emp_con1_wrap span {
	width: 48%;
	
}

.emp_con1_wrap2 {
	padding: 6vw 0 0 0;
	text-align: center;
}

div.contaner_emp h2 {
	margin: 4vw 10px 0;
	font-size: calc(90% + 2vw);
	line-height:  calc(110% + 2vw);
}
	
}

/* ########### 410px以下 ########### */
@media (max-width: 410px) {
div.contaner_emp h2 {
	font-size: calc(69% + 2vw);
	line-height:  calc(110% + 2vw);
}

}



/* アコーディオン全体
----------------------------*/
.ac_menu {
	width: 100%;
	margin: 40px 0 0;
	padding: 0;
	text-align: left;
	/*background: rgba(255,0,0,0.3);*/
}
.ac_menu input {
	display: none; /*チェックボックスを隠す*/
}
/*バー部分*/
.ac_menu label {
	cursor :pointer;
	display: block;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	color: #595858;/*#fff*/
	line-height: 1;
	position: relative;
	margin: 0;
	padding: 10px 10px 10px 15%;
	background: none;/*#4D6989*/
}
/*開いたときに表示される部分*/
.ac_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 10px;
}
.ac_menu li {
	max-height: 0;
	overflow-y: hidden;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	border: none;
	-webkit-transition: all 0.5s; /*閉じるときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li {
	max-height: 35px; /*開いたときに表示されるliの高さ*/
	/*padding: 5px 5px 20px 50px;*/
	border: none;/* solid 1px #4D6989*/
	border-top: none;
	opacity: 1;
	-webkit-transition: all 0.5s; /*開くときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
 /*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child {
	margin-bottom: 20px;
}
		
.ac_menu li a {
	display: block;
	padding: 5px 5px 20px 23%;
	color: #595858;
	/*background: rgba(255,0,0,0.3);*/
}
		
/*閉じた状態の矢印描画*/
.ac_menu label:before{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #595858 2px solid;/*#fff 2px solid*/
	border-right: #595858 2px solid;/*#fff 2px solid*/
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position:absolute;
	left: 2%;
	top: 14px;
	/*bottom: 20px;*/
	/*margin:auto;*/
}
/*開いた状態の矢印描画*/
.ac_menu input[type=checkbox]:checked + label:before{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #595858 2px solid;/*#fff 2px solid*/
	border-right: #595858 2px solid;/*#fff 2px solid*/
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	left: 2%;
	top: 11px;
	/*bottom: 0;*/
	/*margin:auto;*/
}


/* ########### 600px以下 ########### */
@media (max-width: 600px) {
.ac_menu {
	margin: 3vw 0 0;
	padding: 0;
	text-align: center;
}
.ac_menu label {
	color: #fff;/*#fff*/
	padding: 10px;
	background: #4D6989;/*#4D6989*/
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li {
	border: solid 1px #4D6989;/* solid 1px #4D6989*/
	border-top: none;
}
.ac_menu li a {
	display: block;
	padding: 5px 5px 20px 5px;
	color: #4D6989;
}
.ac_menu label:before{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;/*#fff 2px solid*/
	border-right: #fff 2px solid;/*#fff 2px solid*/
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	left: auto;
	right: 6%;
	top: 12px;
	/*bottom: 20px;*/
	/*margin:auto;*/
}
.ac_menu input[type=checkbox]:checked + label:before{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;/*#fff 2px solid*/
	border-right: #fff 2px solid;/*#fff 2px solid*/
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	left: auto;
	right: 6%;
	top: 16px;
	/*bottom: 0;*/
	/*margin:auto;*/
}

}



/* ページネーション
----------------------------*/

ul.p_nation {
    display: flex;/*inline-block*/
	justify-content: space-between;
	align-items: center;
	max-width: 600px;
    padding: 0;
    margin: 0 auto;
	list-style: none;
	font-size: 18px;
	/*background: rgba(200,50,0,0.3);*/
}

ul.p_nation li {
	width: 6%;
	text-align: center;
	/*background: rgba(255,0,0,0.3);*/
}
ul.p_nation li.dot3 {
	width: 6%;
	padding: 5px 0;
    color: #878788;
}
ul.p_nation li.pn_p {
	position: relative;
	width: 24%;
	text-align: right;
	/*padding: 0 3% 0 0;*/
	background: #EFF4F8;
}
ul.p_nation li.pn_n {
	position: relative;
	width: 24%;
	text-align: left;
	/*padding: 0 0 0 3%;*/
	background: #EFF4F8;
}
ul.p_nation li.pn_p:before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	border-top: #595858 1px solid;/*#fff 2px solid*/
	border-left: #595858 1px solid;/*#fff 2px solid*/
	position:absolute;
	left: 10%;
	top: 36%;
	-webkit-transform: translateY(-36%); /* Safari用 */
	transform: translateY(-36%);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	/*bottom: 20px;*/
	/*margin:auto;*/
}
ul.p_nation li.pn_n:before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	border-top: #595858 1px solid;/*#fff 2px solid*/
	border-right: #595858 1px solid;/*#fff 2px solid*/
	position:absolute;
	right: 10%;
	top: 36%;
	-webkit-transform: translateY(-36%); /* Safari用 */
	transform: translateY(-36%);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	/*bottom: 20px;*/
	/*margin:auto;*/
}

ul.p_nation li a {
    color: #878788;
	display: block;
    padding: 5px 0;
    text-decoration: none;
    transition: background-color .3s;
    /*border: 1px solid #ddd;*/
}
ul.p_nation li.pn_p a {
    color: #878788;
	display: block;
	padding: 5px 20% 5px 0;
    text-decoration: none;
    transition: background-color .3s;
}
ul.p_nation li.pn_n a {
    color: #878788;
	display: block;
	padding: 5px 0 5px 20%;
    text-decoration: none;
    transition: background-color .3s;
    /*border: 1px solid #ddd;*/
}


ul.p_nation li a.active {
    background-color: #fff;
    color: #595858;
    border: 1px solid #3B698B;
}

ul.p_nation li a:hover:not(.active) {
	background-color: #ddd;
}

li.off_on {
	display: none;
}





/* ########### 600px以下 ########### */
@media (max-width: 600px) {
.emp_con1C_wrap {
	padding: 4vw 0 0;
}
}

/* ########### 420px以下 ########### */
@media (max-width: 420px) {
ul.p_nation {
	font-size: 14px;
}
ul.p_nation li.pn_p:before,
ul.p_nation li.pn_n:before {
	width:10px;
	height:10px;
}


li.off_on {
	display: block;
}
li.on_off {
	display: none;
}

}