@charset "utf-8";


/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
  background:url(../image/career/img_kv_pc.jpg) no-repeat center center;
  background-size: cover;  
}
.page-ttl h1 {
    max-width: 380px;
}

.txt-lead{
  margin-bottom: 30px;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #7FBE26;
  font-weight: 800;
  text-align: center;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* career
-----------------------------------------------------------------*/
.career{
  padding: 85px 0 0; 
}
.career .resultBox{
  display: flex;
  max-width: 600px;
  margin:0 auto;
  padding: 20px 30px;
  background: url(../image/career/bg_result.svg) top left repeat;
  background-size: 12px;
  border-radius: 20px;
  justify-content: space-between;
}
.career .resultBox .catch{
  width: 80%;
}
.career .resultBox .per{
  width: 20%;
  position: relative;
}
.career .resultBox .per span{
  width: 160%;
  position: absolute;
  bottom:-20px;
  left:15%;
}

.career .careerWrap{
  width: 90%;
  max-width: 1080px;
  margin:60px auto 0;
}
.career .careerWrap .lead{
  font-size: 2.4rem;
  text-align: center;
  font-weight: 700;
}
/* color */
.career .careerWrap.bio  .lead{
  color: #20ACE3;
}
.career .careerWrap.m_coding .lead{
  color: #F3AA3C;
}
.career .careerWrap.psychology .lead{
  color: #EA7A98;
}

.career .careerWrap .wrap{
  margin-top:10px;
  border-radius: 10px;
  overflow: hidden;
}
/* color */
.career .careerWrap.bio .wrap{
  background: #E5EEF8;
}
.career .careerWrap.m_coding .wrap{
  background: #fffae5;
}
.career .careerWrap.psychology .wrap{
  background: #F5E2E9;
}

.career .careerWrap .wrap .inner-wrap{
  margin:30px 40px;
}
.career .careerWrap .wrap .ttl{
  padding:5px 0;
  color:#ffffff;
  font-size: 1.8rem;
  text-align: center;
}
/* color */
.career .careerWrap.bio .wrap .ttl{
  background: #20ACE3;
}
.career .careerWrap.m_coding .wrap .ttl{
  background: #F3AA3C;
}
.career .careerWrap.psychology .wrap .ttl{
  background: #EA7A98;
}

.career .careerWrap .wrap .industry-list{
  padding:15px;
  background: #ffffff;
  text-align: center;
  border-radius: 10px;
}
.career .careerWrap .wrap .industry-list .inner-industry-list{
  max-width: 760px;
  margin:0 auto;
}
.career .careerWrap .wrap .industry-list li{
  display: inline-block;
  margin:0 10px;
}
.career .careerWrap .wrap .industry-list li span{
  margin-right:5px;
  font-size: 70%;
}
.employ-result {
    max-width: 1110px;
}
.employ-result-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	padding: 5px;
}
.employ-result-list li {
    max-width: 500px;
    width: calc((100% - 30px)/2);
    border-radius: 10px;
    background:#cef;
	margin-top:10px;
	padding: 5px;
}
.employ-result-list li img {
    width:50%;
	border-radius: 10px;
    float:left;
}
.employ-result-list li span.employ-initial {
	display: block;
	margin-left: 50%;
	padding: 5px 5px 5px 10px;
	color: #444;
}
.employ-result-list li span.employ-comp {
	display: block;
    background: #20ACE3;
	color: #fff;
	margin: 10px 5px 5px 52%;
	padding: 5px 5px 5px 10px;
	float:none;
}
.employ-result-list li:nth-child(n+3) {
    margin-top: 30px;
}

/* color */
.career .careerWrap.bio .wrap .industry-list li span{
  color: #20ACE3;
}
.career .careerWrap.m_coding .wrap .industry-list li span{
  color: #F3AA3C;
}
.career .careerWrap.psychology .wrap .industry-list li span{
  color: #EA7A98;
}

.career .careerWrap .wrap .company-list{
}
.career .careerWrap .wrap .company-list dl{
  margin-top:15px;
}
.career .careerWrap .wrap .company-list dl dt{
  font-size: 1.6rem;
  font-weight: 700;
}
/* color */
.career .careerWrap.bio .wrap .company-list dl dt{
  color: #20ACE3;
}
.career .careerWrap.m_coding .wrap .company-list dl dt{
  color: #F3AA3C;
}
.career .careerWrap.psychology .wrap .company-list dl dt{
  color: #EA7A98;
}
.career .careerWrap .wrap .company-list dl dd{
  font-size: 1.4rem;
}
.career .careerWrap .btn-detail{
  margin-top:30px;
}
/* color */
.career .careerWrap.bio  .btn-detail a{
  background-color:  #20ACE3;
}
.career .careerWrap.m_coding  .btn-detail a{
  background-color:#F3AA3C;
}
.career .careerWrap.psychology  .btn-detail a{
  background-color: #EA7A98;
}
.career .careerWrap.m_coding .employ-result-list li {
    background:#fdb;
}
.career .careerWrap.m_coding .employ-result-list li span.employ-comp {
    background: #F3AA3C;
	color: #fff;
}
.career .careerWrap.psychology .employ-result-list li {
    background:#fcd;
}
.career .careerWrap.psychology .employ-result-list li span.employ-comp {
    background: #EA7A98;
	color: #fff;
}


/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  .page-ttl{
    background:url(../image/career/img_kv_sp.jpg) no-repeat center center;
    background-size: cover;  
  }
  .page-ttl h1 {
    max-width: 300px;
  }
  .txt-lead{
    margin-bottom: 15px;
    font-size: 1.8rem;
    line-height: 1.5;
  }
  
  
/* career
-----------------------------------------------------------------*/
.career{
  padding: 30px 0 50px; 
}
.career .resultBox{
  margin-top:10%;
  padding: 0;
  background:none;
  border-radius: 0;
}
.career .resultBox .catch{
  width: 100%;
}

.career .careerWrap{
  width: 110%;
  margin:0 0 0 -5%;
  padding:7% 5% 10%;
}
/* color */
.career .careerWrap.bio{
  background: #E5EEF8;
}
.career .careerWrap.m_coding{
  background: #F2ECD2;
}
.career .careerWrap.psychology{
  background: #F5E2E9;
}
.career .careerWrap .lead{
  font-size: 2.4rem;
}
.career .careerWrap .photo{
  margin:3% auto ;
}
.career .careerWrap .wrap{
  margin-top:0;
  border-radius: 0;
}
.career .careerWrap .wrap .inner-wrap{
  margin:3% 0 0;
}
.career .careerWrap .wrap .ttl{
  margin:2% auto 0;
  padding:2px 0;
  font-size: 1.8rem;
  border-radius: 10px;
}
.career .careerWrap .wrap .industry-list{
  padding:0;
  background: none;
  text-align: left;
  border-radius: 0;
}
.career .careerWrap .wrap .industry-list .inner-industry-list{
  display: flex;
  width: 95%;
  flex-wrap: wrap;
}
.career .careerWrap .wrap .industry-list li{
  margin:0 5% 0 0;
  font-size: 1.6rem;
  word-break: keep-all;
}
.career .careerWrap .wrap .industry-list li span{
  margin-right:5px;
  font-size: 70%;
}

.career .careerWrap .wrap .company-list{
  margin: 7% auto 0;
  padding-bottom: 5%;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
.career .careerWrap .wrap .company-list .ttl{
  margin: 0;
  border-radius: 0;
}
.career .careerWrap .wrap .company-list dl{
  margin-top:15px;
  padding:0 5%;
}
.career .careerWrap .wrap .company-list dl dt {
    font-size: 1.8rem;
}
.career .careerWrap .btn-detail{
  margin-top:7%;
}
.employ-result-list li {
    width: 480px;
    width: calc((100% - 10px)/1);
	float: none;
}
#Page .employ-result-list li img {
    width:50%;
}
.employ-result-list li:nth-child(n+3) {
    margin-top: 10px;
}
/* color */
.career .careerWrap.bio  .btn-detail a{
  background-color:  #20ACE3;
}
.career .careerWrap.m_coding  .btn-detail a{
  background-color:#F3AA3C;
}
.career .careerWrap.psychology  .btn-detail a{
  background-color: #EA7A98;
}

}