@charset "UTF-8";
/*===========================================
/careers/careers.css
===========================================*/
/*-----------------------
styles
-----------------------*/

#kvCareers{background-image:url(../images/kv_01.png);}
#kvCareers h1{
  color:#154192;
  font-size: 4.8rem;
}
#kvCareers p{ font-size: 1.8rem; margin-top: 30px;}

@media screen and (max-width:767px){
  #kvCareers{background-image:url(../images/sp_kv_01.png);}
}


.careersHead{
  background-color: #154192;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.careersHead h1{ color: #ffffff; margin-left: 60px;}
.careersHead a{
  display: block;
  position: relative;
  width: 280px;
  height: 60px;
  background-color: #ffffff;
  color: #154192;
  display: flex;
  align-items: center;
  padding-left: 2em;
  margin-right: 30px;
}
.careersHead a::after{
  content: url(../images/arrow.svg);
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 20px;
  width: 50px;
  height: 8px;
}
.careersHead a:link{}
.careersHead a:hover{
  text-decoration: none ;
  background-color:#D4DEF1;
}
.careersHead a:visited{}

#contents > section{padding: 50px 80px 80px;}
#contents > section:nth-child(even){background-color: #F0F6FF;}
#contents > section:nth-child(odd){background-color: #E5EFFF;}
#contents > section .h2Type01:first-child{ margin-top: 0;}
section.careersTOP{ padding: 60px !important;}
section.-slim{ padding: 60px 140px !important;}
section >.heading{
  position: relative;
  font-weight: bold;
  font-size: 1.8rem;
  color: #154192;
  margin-bottom: 10px;
  margin-left: -20px;
}
section >.heading + p{margin-left: -20px; margin-right: -20px; font-size: 1.4rem;}
section.careersTOP >.heading{margin-left: 0;}
section >.heading::before{ 
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%; left: -60px;
  border-bottom: 2px solid #154192;
  width: 40px;
}

@media screen and (max-width:767px){
  .careersHead{display: block; padding: 0 10px 20px; margin: 0 -10px;}
  .careersHead h1{margin-left: 0;}
  .careersHead a{width: 100%;}
  #contents > section{ margin: 0 -10px; padding: 20px 10px 20px;}
  section.careersTOP,section.-slim{ padding: 10px !important;}
  section >.heading{padding-left: 30px;margin-left: 0;}
  section >.heading + p{padding-left: 30px; margin-right: 0;}
  section >.heading::before{ left:-20px;width: 30px;}
}

.careersTOP .lead p{
  margin-bottom: 20px;  
}
.careersTOP .lead p span{
  background:linear-gradient(transparent 0, #154192 0);
  color: #fff;
  font-size: 2.6rem;
  padding: 5px 8px;
}
.careersTOP .solution dt p{ margin-bottom: 20px;}
.careersTOP .solution dt p span{
  background-color: #ffffff;
  color: #154192;
  display: inline-block;
  padding: 3px 15px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
}
.careersTOP .solution dt{ 
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.careersTOP .solution dd{
  margin-bottom: 30px;
}
.careersTOP .data{
  display: flex;
  justify-content: space-around;
  margin: 30px 90px 30px 70px;
  flex-wrap: wrap;
}
.careersTOP .data li{
  width: 240px;
  margin-left: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.2rem;
}
.careersTOP .data li dl{
  min-height: 300px;
  background-color: #E5EFFF;
  margin-bottom: 5px;
  padding: 20px 0;
  position: relative;
}
.careersTOP .data li dt{
  margin-bottom: 10px;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.4em;
}
.careersTOP .data li dd{ 
}
.careersTOP .data li dd span{
  font-weight: bold;
  display: block;
}


@media screen and (min-width:767px){
  .careersTOP .data li dd img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .careersTOP .data li dd span{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    font-size: 2.8rem;
  }
}
.careersTOP .data li dt,
.careersTOP .data li dd span{ color: #154192; }

.careersTOP .info{
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}
.careersTOP p.xxlarge{ font-size: 3.3rem !important; line-height: 1.6;}

@media screen and (max-width:767px){
  .careersTOP .lead p{ background-color:#154192; padding: 10px; margin: 0 -10px 10px; }
  .careersTOP .lead p br{display: none;}
  .careersTOP .lead p span{background: none; padding: 0; font-size: 1.6rem;}
  .careersTOP .alignC.-pc{ text-align: left !important;}
  .careersTOP .data{ margin: 0;}
  .careersTOP .data li{width: 48%; margin-left: 2%;}
  .careersTOP .data li dl{padding: 10px; min-height: 100px;}
  .careersTOP .data li dd span{ font-size: 1.8rem; margin-top: 2rem;}
  .careersTOP .info{flex-direction: column;}
  .careersTOP .info li{ margin: 0 auto 10px;}
  .careersTOP p.xxlarge{ font-size: 2rem !important;}
}

.img-col img,
.solution dd img{width: auto !important;}

.tPattern03{
  border: none;
  border-collapse: separate;
  border-spacing: 2px;
}
.tPattern03 th,
.tPattern03 td{
  padding: 20px;
  border:none;
}
.tPattern03 th{background-color: #D8E6FC; text-align: left;}
#contents > section:nth-child(odd) .tPattern03 th{background-color: #F0F6FF;}
.tPattern03 td{background-color: #ffffff;}

.imgArea{
  text-align: center;
  background-color: #ffffff;
  margin: 20px 0;
  padding: 40px 10px;
}
.tecTrivia{margin-bottom: 60px; }
.tecTrivia dl{
  clear: both;
}
.tecTrivia dt{
  clear: both;
  display: block;
  float: left;
  width: 105px;
  height: 105px;
  background-color: #154192;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  padding-top: 35px;
  font-size: 110%;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.tecTrivia dd{
  display: block;
  padding:10px 0 0 120px;
  color: #154192;
}

.careersNav{
  background-color: #154192;
  padding: 60px 80px 20px;
}
.careersNav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}
.careersNav li{
  margin-bottom: 40px;
}
.careersNav li a{
  width: 280px;
  height: 60px;
  background-color: #4C78C9;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 2em;
}
.careersNav li a:hover {
	text-decoration: none ;
  background-color:#ffffff;
  color: #154192;
}

/* noLink */
.careersNav li.noLink a,
.linkBtn a.noLink,
#kvCareers .more.internship a.noLink{
	cursor: default;
  color: #ffffff ;
  background-color:#909090;
  line-height: 1.4;
}
.careersNav li.noLink a:link{}
.careersNav li.noLink a:hover,
.linkBtn a.noLink:hover,
#kvCareers .more.internship a.noLink:hover{
	text-decoration: none ;
  background-color:#909090;
}
.careersNav li.noLink a:visited{
	color:#ffffff ;
}
.careersNav li.noLink a span::after{
  content:'Coming Soon';
  display: block;
  font-size: 1.4rem;
}
.linkBtn a.noLink::after{display: none;}

.linkBtn.-wide{text-align: center; margin: 60px 0; }
.linkBtn.-wide a{ width: 360px; margin: 0 auto;}
.linkBtn.-wide.-auto{display: flex;}
.linkBtn.-wide.-auto a{ width: auto; padding-right: 90px;}

.interviewKV{
  width: 100%;
  min-height: 320px;
  position: relative;
  margin-top: 36px;
  padding: 60px;
  background-color: #cccccc;
}
.interviewKV#int01{ background: url("../images/kv_interview_01.png") 0 0 no-repeat;}
.interviewKV#int02{ background: url("../images/kv_interview_02.png") 0 0 no-repeat;}
.interviewKV#int03{ background: url("../images/kv_interview_03.png") 0 0 no-repeat;}
.interviewKV#int04{ background: url("../images/kv_interview_04.png") 0 0 no-repeat;}
.interviewKV#int05{ background: url("../images/kv_interview_05.png") 0 0 no-repeat;}
.interviewKV .more{
  position: absolute;
  bottom: 0;
  right: 0;
}
.interviewKV p{ 
  font-size: 2.1rem; 
  line-height: 1.4em; 
  font-weight: 100; 
  font-weight: bold; 
  color: #000000; 
  text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.8);
}
.interviewKV.colorA p{
  color:#ffffff; 
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}
.interviewKV.colorB p{
  color:#014099; 
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}
.interviewKV .name{ font-size: 1.8rem; margin-top: 1em;}
.interviewKV .name span{ font-size: 1.4rem; display: block;}
.interviewKV .more a,
#kvCareers .more a,
.linkBtn a{
  display: block;
  position: relative;
  width: 280px;
  height: 60px;
  background-color: #154192;
  color: #ffffff;
  text-shadow: none;
  display: flex;
  align-items: center;
  padding-left: 2em;
  font-size: 1.6rem;
}
#kvCareers .more a{ width: 360px;}
.interviewKV .more a::after,
#kvCareers .more a::after,
.linkBtn a::after{
  content: url("../images/arrow_white.svg");
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 20px;
  width: 50px;
  height: 8px;
}
.interviewKV .more a:link,
#kvCareers .more a:link,
.linkBtn a:link{}
.interviewKV .more a:hover,
#kvCareers .more a:hover,
.linkBtn a:hover{
  text-decoration: none ;
  background-color:#4C78C9;
}
.interviewKV .more a:visited,
#kvCareers .more a:visited,
.linkBtn a:visited{}

#kvCareers .more.internship a{background-color: #ED7D32;}
#kvCareers .more.internship a:hover{background-color: #ff9966;}
.linkBtn.internship a{background-color: #ED7D32;}
.linkBtn.internship a:hover{background-color: #ff9966;}

.intPrivate .heading{ font-weight: normal; margin-bottom: 15px;}
.intPrivate .img-col{ margin-top: 20px;}

@media screen and (min-width:768px){
  .intPrivate .row,
  .careersTOP .row{
    margin-right: -40px;
    margin-left: -40px;
  }
  .intPrivate .row > [class*="col"],
  .careersTOP .row > [class*="col"]{
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 767px) {
  .interviewKV{ padding: 10px; }
  .interviewKV{
	  /*-moz-background-size:100% auto;
    -webkit-background-size:100% auto;
    background-size:100% auto!important;*/
    background-size: cover;
    background-position: right 30% bottom 0 !important;
	}
  
  .interviewKV .more a,
  #kvCareers .more a,
  .linkBtn a,
  .linkBtn.-wide a{ width: 80vw; margin: 0 auto;}
  .tecTrivia dt{float: none; height: auto; padding: 5px; margin: 0; border-radius: 10px;font-size: 1.4rem;}
  .tecTrivia dd{padding: 5px;}
  .tPattern03 th,.tPattern03 td{padding: 8px;}
  .careersNav{ margin: 0 -10px; padding: 30px 10px 10px; }
  .careersNav ul{ display: block;}
  .careersNav li{margin-bottom: 15px;}
  .careersNav li a{ width: 100%;}
}