@charset "utf-8";
/* CSS Document */


/* ------------------------------------------------------------
	事業を知る
   ------------------------------------------------------------ */
.solutionListWrap::after{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}
.solutionList{
	width:308px;
	float:left;
}
.solutionList + .solutionList{
	margin-left:18px;
}

.solutionList::after{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}
.solutionList_title{
	font-weight:500;
	margin-bottom:10px;
	padding-bottom:4px;
    border-bottom: 1px dotted #1a5382;
}
.solutionList_thumbnail{
	float:left;
}

.solutionList_type{
	float:left;
	margin-left:8px;
}
.solutionList_type::after{
	content:"など";
	display:block;
	text-align:right;
	font-size:12px;
	margin-top:5px;
}
.solutionList_type li{
	text-indent:-1em;
	margin-left:1em;
}
.solutionList_type-logo li + li{
	margin-top:16px;
}
.solutionList1col .solutionList{
	width:100%;
}
.solutionList1col .solutionList_type{
	width:auto;
}

@media screen and (max-width:1200px) {}

@media screen and (max-width:1024px) {
.solutionList{
	width:49%;
}
.solutionList:nth-child(2){
	float:right;
}
.solutionList:nth-child(3){
	margin-top:20px;
}
.solutionList + .solutionList{
	margin-left:0;
}
}

@media screen and (max-width:768px) {
.solutionList{
	width:100%;
}
.solutionList + .solutionList{
	margin-left:0;
	margin-top:20px;
}
.solutionList_thumbnail{
	width:100px;
}
.solutionList_thumbnail img{
	width:100%;
}
.solutionList_type,
.solutionList1col .solutionList_type{
	width:calc( 100% - 108px );
}
}

.roleBox{
	width:100%;
	margin:10px auto 0;
}
.roleBox::after{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}
.roleBoxImg-left{
	float:left;
}
.roleBoxImg-right{
	float:right;
}
.roleBoxImg_link{
	display:block;
}
.roleBoxImg_link:hover{
	opacity:0.7;
}
@media screen and (max-width:1024px) {
.roleBox{
	width:100%;
}
.roleBoxImg img{
	width:100%;
}
.roleBoxImg-left{
	width:44.583333%;
}
.roleBoxImg-right{
	width:55.416667%;
}

}


/* ------------------------------------------------------------
	お客様を知る
   ------------------------------------------------------------ */
.customerMain{
	padding-bottom:0;
}
.customerTopMess{
	background:url(/recruit/business/customer/img/customer_topmess_bk.png) no-repeat top right;
	min-height:424px;
}
.customerTopMessTtl{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}
.customerTopMessTtl_blue {
    color: #00A0B7;
}
.customerTopMess_txt{
	line-height:1.8;
	font-size:18px;
}
.customerTopMess_txt + .customerTopMess_txt{
	margin-top:14px;
}

.customerBox{
	width:100%;
	padding:30px 0 40px;
}
.customerBox::after,
.customerBoxInner::after{
	content:"";
	display:block;
	overflow:hidden;
	clear:both;
}
.customerBox_01{
	background:url(/recruit/business/customer/img/customer_bk01.png) no-repeat top center;
	background-size:cover;
	margin-top:40px;
}
.customerBox_02{
	background:url(/recruit/business/customer/img/customer_bk02.png) no-repeat top center;
	background-size:cover;
}
.customerBox_03{
	background:url(/recruit/business/customer/img/customer_bk03.png) no-repeat top center;
	background-size:cover;
}
.customerBox_04{
	background:url(/recruit/business/customer/img/customer_bk04.png) no-repeat top center;
	background-size:cover;
}

.customerBoxInner{
	width:960px;
	margin:0 auto;
}
.customerBoxCon{
	width:500px;
	float:left;
}
.customerBox_ttl{
    font-size: 28px;
    color: #00A0B7;
	margin-top:20px;
}
.customerBox_txt{
	margin-top:20px;
	line-height:1.8;
	font-size:18px;
}
.customerBox_txt + .customerBox_txt{
	margin-top:20px;
}
.customerBoxImg{
	float:right;
	width:250px;
}


@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {

.customerTopMessTtl {
    font-size: 26px;
    margin-bottom: 10px;
}
.customerTopMess_txt {
    font-size: 16px;
}
.customerTopMess_txt br{
	display:none;
}

.customerBox{
	width:100%;
	padding:30px;
}

.customerBoxInner{
	width:100%;
	margin:0 auto;
}

.customerBoxCon,
.customerBoxImg{
	width:100%;
	float:none;
}
.customerBox_ttl{
	margin-top:0;
}

.customerBoxImg{
	float:none;
	width:100%;
	text-align:center;
	margin-top:20px;
}

}

@media screen and (max-width:450px) {
.customerTopMess {
	background-size:100%;
	min-height:auto;
}
}


/* ------------------------------------------------------------
	業務を知る
   ------------------------------------------------------------ */
.contentBox{
	width:100%;
	height:auto;
	position:relative;
	display: -ms-flexbox;
    display: flex;
}
.contentBoxLeft.contentBox{
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-align: end;
    align-items: flex-end;
}
.contentBoxRight.contentBox {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
}
.contentBox + .contentBox{
	margin-top:60px;
}

.contentBoxImg{
	width:33%;
	z-index:1;
	position:absolute;
	top:0;
}
.contentBoxLeft .contentBoxImg{
	left:0;
}
.contentBoxRight .contentBoxImg {
    right: 0;
}

.contentBoxImg_img{
	width:100%;
}

.contentBoxCon{
	width:70%;
	z-index:0;
	position:relative;
	background:#F6F6F6;
	margin-top:40px;
}
.contentBoxLeft .contentBoxCon {
	padding:34px 34px 34px 6% ;
}
.contentBoxRight .contentBoxCon {
    padding: 34px 6% 34px 34px ;
}
.contentBoxInfra .contentBoxCon {
	margin-top:90px;
}

.contentBoxCon:after{
	content:"";
	display:block;
	overflow:hidden;
	clear:both;
}

.contentBoxCon_ttl{
	width:55%;
	line-height:50px;
	background:#222;
	color:#fff;
	padding:0 20px;
	font-size:20px;
	z-index:2;
	position:absolute;
}
.contents .contentBoxCon_ttl{
	width:69%;
}
.contentBoxLeft .contentBoxCon_ttl{
	top:74px;
	left:28%;
}
.contentBoxRight .contentBoxCon_ttl {
	top:74px;
	right:28%;
}
.contentBoxInfra .contentBoxCon_ttl {
	top:120px;
	width:70%;
	left:34px;
}

.contentBoxCon_txt{
	width: 76%;
	float:left;
	margin-top:70px;
}
.contents .contentBoxCon_txt{
	width: 100%;
}
.contentBoxLeft .contentBoxCon_txt{
	float:left;
}
.contentBoxRight .contentBoxCon_txt {
	float:right;
}

.contentBoxConPerson{
	width: 20%;
}
.contentBoxLeft .contentBoxConPerson{
	float:right;
}
.contentBoxRight .contentBoxConPerson {
	float:left;
}

.contentBoxConPersonImg{
	width:100%;
}
.contentBoxConPersonImg_img{
	width:100%;
}
.contentBoxConPerson_name{
	display:block;
	text-align:center;
	font-size:16px;
	font-weight:600;
	margin-top:6px;
}
.contentBoxConPerson_join{
	font-size:13px;
	display:block;
	text-align:center;
}
.contentBoxConPersonBtn{
	width:100%;
	margin-top:10px;
}
.contentBoxConPersonBtn_lnk{
	display:block;
	width:100%;
	height:100%;
	padding:10px;
	background:#FFF;
	text-align:center;
	font-size:14px;
	color:#222;
	text-decoration:none;
	border:1px solid #222;
    transition: all 0.3s;
}

/* システムサポート(システム開発）
   ------------------------------------------------------------ */
.contentBoxSystemsupport .contentBoxCon_ttl{
    background: #d63603;
}
.contentBoxSystemsupport .contentBoxConPersonBtn_lnk{
    border: 1px solid #d63603;
}
.contentBoxSystemsupport .contentBoxConPersonBtn_lnk:hover{
	background: #d63603;
	color:#fff;
}
/* システムサポート(インフラ構築）
   ------------------------------------------------------------ */
.contentBoxInfra .contentBoxCon_ttl{
    background: #ef6821;
}
.contentBoxInfra .contentBoxCon_txt{
	width:100%;
}

/* お客様サポート(システム操作説明）
   ------------------------------------------------------------ */
.contentBoxProgress .contentBoxCon_ttl{
    background: #7B5B9E;
}
.contentBoxProgress .contentBoxConPersonBtn_lnk{
    border: 1px solid #7B5B9E;
}
.contentBoxProgress .contentBoxConPersonBtn_lnk:hover{
	background:#7B5B9E;
	color:#fff;
}
/* お客様サポート(システム操作説明）
   ------------------------------------------------------------ */
.contentBoxOperation .contentBoxCon_ttl{
    background: #0068B6;
}
.contentBoxOperation .contentBoxConPersonBtn_lnk{
    border: 1px solid #0068B6;
}
.contentBoxOperation .contentBoxConPersonBtn_lnk:hover{
	background:#0068B6;
	color:#fff;
}
/* コンテンツ制作(デザイン）
   ------------------------------------------------------------ */
.contentBoxDesign .contentBoxCon_ttl{
    background: #37BF4F;
}
.contentBoxDesign .contentBoxConPersonBtn_lnk{
    border: 1px solid #37BF4F;
}
.contentBoxDesign .contentBoxConPersonBtn_lnk:hover{
	background:#37BF4F;
	color:#fff;
}
/* コンテンツ制作(開示コンテンツ制作）
   ------------------------------------------------------------ */
.contentBoxDisclosure .contentBoxCon_ttl{
    background: #33A9C3;
}
.contentBoxDisclosure .contentBoxConPersonBtn_lnk{
    border: 1px solid #33A9C3;
}
.contentBoxDisclosure .contentBoxConPersonBtn_lnk:hover{
	background:#33A9C3;
	color:#fff;
}
/* コンテンツ制作(Webコンテンツ制作）
   ------------------------------------------------------------ */
.contentBoxWeb .contentBoxCon_ttl{
    background: #F1C316;
}
.contentBoxWeb .contentBoxConPersonBtn_lnk{
    border: 1px solid #F1C316;
}
.contentBoxWeb .contentBoxConPersonBtn_lnk:hover{
	background:#F1C316;
	color:#fff;
}

/* コンテンツ制作(校正）
   ------------------------------------------------------------ */
.contentBoxProofreading .contentBoxCon_ttl{
    background: #FF605D;
}
.contentBoxProofreading .contentBoxConPersonBtn_lnk{
    border: 1px solid #FF605D;
}
.contentBoxProofreading .contentBoxConPersonBtn_lnk:hover{
	background:#FF605D;
	color:#fff;
}

@media screen and (max-width:768px) {
.contentBox{
	width:100%;
	height:auto;
	position:relative;
	display:block;
}
.contentBoxImg{
	width:100%;
	margin:0 auto;
	position:static;
}
.contentBoxCon{
	width:100%;
	position:static;
	padding:30px ;
	float:none;
	margin-top:0;
}
.contentBoxInfra .contentBoxCon,
.contentBoxProofreading .contentBoxCon{
    margin-top: 0;
}

.contentBoxCon_ttl,
.contentBoxInfra .contentBoxCon_ttl,
.contentBoxWeb .contentBoxCon_ttl,
.contentBoxProofreading .contentBoxCon_ttl{
	width:100%;
	line-height:normal;
	padding:10px 20px;
	font-size:16px;
	position:static;
}
.contentBoxCon_txt{
	width: 100%;
	float:none;
	margin-top:0;
}
.contentBoxConPerson{
	width: 100%;
	float:none;
	margin-top:10px;
}
.contentBoxConPersonImg{
	width:100%;
	max-width:140px;
	margin:0 auto;
}
.contentBoxConPersonImg_img{
	width:100%;
} 
.contentBoxConPersonBtn{
	width:100%;
	margin-top:10px;
}
}



/* ------------------------------------------------------------
	教育を知る
   ------------------------------------------------------------ */
.SeniorVoice{
	margin-top:40px;
}

.SeniorVoiceBox{
    padding: 30px;
}

.SeniorVoiceBox + .SeniorVoiceBox{
	margin-top:30px;
}

.SeniorVoiceBox::after,
.SeniorVoiceBoxPersonProf::after{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}
.SeniorVoiceBoxLeader{
	background:#ffeaea;
	margin-bottom:30px;
}
.SeniorVoiceBoxStudents{
	background:#e1e9fb;
}
.SeniorVoiceBoxStudents + .SeniorVoiceBoxStudents{
	margin-top:10px;
}

.SeniorVoiceBoxPerson{
	width:300px;
	position:relative;
}

.SeniorVoiceBoxPerson_mt20 {
  margin-top: 20px;
}

.SeniorVoiceBoxLeader .SeniorVoiceBoxPerson{
	float:left;
}
.SeniorVoiceBoxStudents .SeniorVoiceBoxPerson{
	float:right;
}
.SeniorVoiceBoxPersonProfImg{
	margin-bottom:-30px;
}
.SeniorVoiceBoxLeader .SeniorVoiceBoxPersonProfImg{
	float:left;
}
.SeniorVoiceBoxStudents .SeniorVoiceBoxPersonProfImg{
	float:right;
}

.SeniorVoiceBoxPersonProf{
	width:145px;
	position:absolute;
}
.SeniorVoiceBoxLeader .SeniorVoiceBoxPersonProf{
	bottom:20px;
	right:-22px;
}
.SeniorVoiceBoxStudents .SeniorVoiceBoxPersonProf{
	bottom:20px;
	left:-22px;
}

.SeniorVoiceBoxPersonProf_name{
	display:block;
	font-size:20px;
	font-weight:500;
	text-align:center;
}
.SeniorVoiceBoxPersonProf_role{
	display:block;
	width:110px;
	color:#fff;
	padding:4px 14px;
	border-radius:50px;
	font-size:14px;
  font-weight: bold;
	text-align:center;
	margin:5px auto;
}

/* IE文字位置調整 */
@media all and (-ms-high-contrast: none) {
  .SeniorVoiceBoxPersonProf_role {
    padding:4px 14px 2px;
  }
}

.SeniorVoiceBoxLeader .SeniorVoiceBoxPersonProf_role{
	background:#d64848;
}
.SeniorVoiceBoxStudents .SeniorVoiceBoxPersonProf_role{
	background:#3b67c7;
}
.SeniorVoiceBoxPersonProf_join{
	display:block;
	font-size:13px;
	text-align:center;
  white-space: nowrap;
}
   
.SeniorVoiceBoxInterview{
	background:#fff;
	padding:30px;
	width:560px;
	border-radius:5px;
	position:relative;
}
.SeniorVoiceBoxLeader .SeniorVoiceBoxInterview{
	float:right;
}
.SeniorVoiceBoxLeader .SeniorVoiceBoxInterview::after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 20px 15px 0;
	border-color: transparent #ffffff transparent transparent;
	position:absolute;
	top:40px;
	left:-19px;
}

.SeniorVoiceBoxStudents .SeniorVoiceBoxInterview{
	float:left;
}   
.SeniorVoiceBoxStudents .SeniorVoiceBoxInterview::after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent #ffffff;
	position:absolute;
	top:40px;
	right:-19px;
}   
@media screen and (max-width:1024px) {   
  .SeniorVoiceBoxPerson {
      width: 38%;
  }
  .SeniorVoiceBoxInterview {
      width: 58%;
  }
  }

  @media screen and (max-width:768px) {
  .SeniorVoiceBox {
      padding:10px;
  }
  .SeniorVoiceBoxPerson {
      width: 300px;
  }

  .SeniorVoiceBoxPerson_mt20 {
    margin-top: 0;
  }

  .SeniorVoiceBoxLeader .SeniorVoiceBoxPersonProf,
  .SeniorVoiceBoxStudents .SeniorVoiceBoxPersonProf {
      top: 60px;
  }
  .SeniorVoiceBoxPersonProfImg{
    margin-bottom:0;
  }
  .SeniorVoiceBoxInterview {
      background: #fff;
      width: 100%;
      border-radius: 5px;
      position: relative;
  }
  .SeniorVoiceBoxInterview::after {
    display:none;
  }
}


@media screen and (max-width:330px) {
  .SeniorVoiceBoxStudents .SeniorVoiceBoxPersonProf {
    left: 0;
  }
  
  .SeniorVoiceBoxLeader .SeniorVoiceBoxPersonProf {
    right: 0;
  }
}


@media screen and (max-width:300px) {
   .SeniorVoiceBoxPerson {
      width: 100%;
  } 
}