@charset "utf-8";

/***********************************************************
  採用サイト専用スタイルシート
************************************************************/
/* Fonts
-----------------------------------------------------------*/
.wf-notosans{
font-family:'Noto Sans JP', sans-serif;
}

.wf_OpenSans{
font-family: 'Open Sans', sans-serif;
}

.wf_Montserrat{
font-family: 'Montserrat', sans-serif;
}

.monotype{
font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
}


/* グローバルヘッダ: Override
-----------------------------------------------------------*/
#g_header_wrapper{
margin:0 auto;
min-width:1300px;
}


@media screen and (max-width:360px) {
  #g_header_wrapper{
  min-width:auto;
  min-width:initial;
  }
}


/* Global Navigation Area: PC: Override
-----------------------------------------------------------*/
#g_navi{
position:relative;
background-color:#cc004a;
z-index:100;

margin:0 auto;
min-width:1300px;
}

@media screen and (max-width:360px) {
  #g_navi{
  min-width:auto;
  min-width:initial;
  }
}



/* HERO
-----------------------------------------------------------*/
#mc_hero_wrapper{
background-color:#008ccf;
}

@media screen and (max-width:360px) {
  #mc_hero_wrapper{
  margin:0!important;
  }
}


#mc_hero{
position:relative;
margin:0 auto;
width:100%;
width:1300px;
min-width:1300px;
height:650px;
overflow:hidden;
}

@media screen and (max-width:360px) {
  #mc_hero{
  width:100%;
  min-width:auto;
  min-width:initial;
  height:auto;
  }
}



/*---------------------------------------------------------
 先輩スタッフの声
-----------------------------------------------------------*/
#mc_hero h1{
position:relative;
z-index:1;
margin-bottom:5px;
padding:30px 0px 0px;
text-align:center;
}

@media screen and (max-width:360px) {
  #mc_hero h1{
  position:absolute;
  top:15px;
  right:10px;
  margin-bottom:0px;
  padding:0px;
  }
  #mc_hero h1 img{
  width:110px;
  height:auto;
  }
}


#mc_hero figure{
position:absolute;
z-index:0;
top:0px;
left:0px;
}

@media screen and (max-width:360px) {
  #mc_hero figure{
  position:relative;
  z-index:0;
  top:0px;
  left:0px;
  }
}


#mc_hero h2{
margin:0 0 70px 700px;
font-family:'Noto Sans JP', sans-serif;
font-size:258%;
font-weight:900;
line-height:1.3;
color:#ffffff;
}

@media screen and (max-width:360px) {
  #mc_hero h2{
  margin:0 0 0px 0px;
  padding:10px 10px;
  font-size:150%;
  text-align:center;
  }
}



#mc_hero > dl{
margin-left:700px;
font-family:'Noto Sans JP', sans-serif;
color:#ffffff;
}

#mc_hero > dl > dt{
margin-bottom:10px;
font-size:343%;
font-weight:500;
}

#mc_hero > dl > dd{
margin-bottom:10px;
font-size:128.5%;
line-height:1.2;
}

@media screen and (max-width:360px) {
  #mc_hero > dl{
  display:table;
  margin:0 auto 10px;
  margin:0 2% 10px;
  width:96%;
  color:#ffffff;
  }

  #mc_hero > dl > dt{
  margin-bottom:10px;
  font-size:100%;
  font-weight:500;
  }

  #mc_hero > dl > dd{
  margin-bottom:10px;
  font-size:100%;
  }
}


#mc_hero > dl > dd:last-child{}

#mc_hero > dl > dd:last-child dl{
display:flex;
}

#mc_hero > dl > dd:last-child dl dt{
width:7em;
}

#mc_hero > dl > dd:last-child dl dd{
width:350px;
}

@media screen and (max-width:360px) {


  #mc_hero > dl > dd:last-child dl dt{
  width:7em;
  width:35%;
  }

  #mc_hero > dl > dd:last-child dl dd{
  width:auto;
  width:65%;
  }
}


@media screen and (max-width:360px) {
  #mainContentsArea_wrapper,
  #mainContentsArea,
  #mainContentsArea_inner{
  margin-top:0px!important;
  padding-top:0px!important;
  }
}



/* 設問 */
.staff_question{
position:relative;
margin-bottom:20px;
padding-left:128px;
background-image:url(./img/bg/bg_staff_question.png);
background-repeat:no-repeat;
background-position:left top;
}

@media screen and (max-width:360px) {
  .staff_question{
  position:relative;
  margin-bottom:20px;
  padding-left:60px;
  background-image:url(./img/bg/bg_staff_question.png);
  background-repeat:no-repeat;
  background-position:left top;
  background-size:50px auto;
  }
}


.staff_question .arrow{
position:absolute;
top:36px;
left:115px;
width:30px;
height:30px;
background-color:#bbc441;
transform:rotate(45deg);
}

@media screen and (max-width:360px) {
  .staff_question .arrow{
  position:absolute;
  top:18px;
  left:55px;
  width:15px;
  height:15px;
  }
}



.staff_question h3{
display:table;
margin-top:25px;
padding:30px 0px;
min-height:42px;
width:100%;
font-size:215%;
line-height:1.2;
color:#ffffff;
background-color:#bbc441;
border-radius:12px;
}

.staff_question h3 > span{
display:table-cell;
vertical-align:middle;
padding:0px 30px;
}

@media screen and (max-width:360px) {
  .staff_question h3{
  display:table;
  margin-top:25px;
  padding:10px 0px;
  min-height:42px;
  width:100%;
  font-size:112.5%;
  line-height:1.2;
  color:#ffffff;
  background-color:#bbc441;
  border-radius:12px;
  }

  .staff_question h3 > span{
  display:table-cell;
  vertical-align:middle;
  padding:0px 20px;
  }
}



/* 回答 */
.staff_answer{
padding-bottom:25px;
padding-left:128px;
font-size:115%;
line-height:1.8;
}

@media screen and (max-width:360px) {
  .staff_answer{
  padding-bottom:25px;
  padding-left:0px;
  font-size:100%;
  line-height:1.8;
  }
}


.ph_staff{}

.staff_answer img{
max-width:100%;
height:auto;
}

@media screen and (max-width:360px) {
  .ph_staff{
  margin-bottom:15px;
  }

  .staff_answer img{
  max-width:100%;
  height:auto;
  }
}


/* 回答:画像右 */
.image_r{}

.image_r .ph_staff{
float:right;
margin-left:20px;
}

/* 回答:画像左 */
.image_l{}

.image_l .ph_staff{
float:left;
margin-right:20px;
}

@media screen and (max-width:360px) {
  /* 回答:画像右 */
  .image_r{}

  .image_r .ph_staff{
  float:none;
  margin-left:0px;
  }

  /* 回答:画像左 */
  .image_l{}

  .image_l .ph_staff{
  float:none;
  margin-right:0px;
  }
}


/* 休日の過ごし方、等 */
#personal_time{
margin:0 auto 50px;
width:960px;
}

@media screen and (max-width:360px) {
  #personal_time{
  margin:0 auto 20px;
  width:100%;
  }
}


#personal_time dl{}

#personal_time dl dt{
display:flex;
align-items:center;
display:table;
width:100%;
font-size:215%;
text-align:center;
color:#ffffff;
background-color:#008ccf;
border-radius:12px 12px 0px 0px;
}
#personal_time dl dt > span{
display:table-cell;
padding:18px 0 30px;
padding:18px 0 20px;
}
#personal_time dl dt > span img{
vertical-align:middle;
margin-right:30px;
}

@media screen and (max-width:360px) {
  #personal_time dl{
  padding:0 10px;
  }
  #personal_time dl dt{
  display:flex;
  align-items:center;
  display:table;
  width:100%;
  font-size:112.5%;
  border-radius:12px 12px 0px 0px;
  }
  #personal_time dl dt > span{
  display:table-cell;
  padding:10px 0 10px;
  }
  #personal_time dl dt > span img{
  margin-right:10px;
  width:30px;
  height:auto;
  }
}



#personal_time dl dd{
padding:30px 40px;
font-size:115%;
line-height:1.8;

color:#ffffff;
background-color:#3aa5da;
border-radius:0px 0px 12px 12px;
}

@media screen and (max-width:360px) {
  #personal_time dl dd{
  padding:20px 20px;
  padding:10px 15px;
  font-size:100%;
  line-height:1.5;

  color:#ffffff;
  background-color:#3aa5da;
  border-radius:0px 0px 12px 12px;
  }
}


/* 未来の後輩にひとこと */
#staff_message_wrapper{
background-color:#bce4ef;
background-image:url(./img/bg/bg_staff_message.gif);
background-repeat:repeat-x;
background-position:center bottom;
}

@media screen and (max-width:360px) {
  #staff_message_wrapper{
  background-color:#bce4ef;
  background-image:url(./img/bg/bg_staff_message.gif);
  background-repeat:repeat-x;
  background-position:center bottom;
  background-size:auto 700px;
  }
}


#staff_message{
margin:0 auto;
padding:30px 0px 40px;
width:960px;
}

@media screen and (max-width:360px) {
  #staff_message{
  padding:20px 0px 20px;
  padding:20px 0px 0px;
  width:100%;
  }
}



#staff_message_body_wrapper{
margin-bottom:30px;
}

@media screen and (max-width:360px) {
  #staff_message_body_wrapper{
  margin-bottom:15px;
  padding:0 15px;
  }
}


#staff_message_body_wrapper figure{
float:left;
margin-right:15px;
width:240px;
text-align:center;
}
#staff_message_body_wrapper figure img{
max-width:100%;
height:auto;
}

@media screen and (max-width:360px) {
  #staff_message_body_wrapper figure{
  margin-right:0px;
  width:40%;
  }
  #staff_message_body_wrapper figure img{
  height:160px;
  width:auto;
  max-width:initial;
  max-width:auto;
/*
  max-width:100%;
  height:auto;
*/
  }
}


#staff_message_body{
box-sizing: border-box;
position:relative;
float:right;
width:705px;
padding:30px 50px;
background-color:#ffffff;
border-radius:12px;
}

@media screen and (max-width:360px) {
  #staff_message_body{
  position:relative;
  float:right;
  width:75%;
  width:60%;
  padding:15px 15px;
  background-color:#ffffff;
  border-radius:12px;
  }
}


#staff_message_body .arrow{
position:absolute;
top:30px;
left:-14px;
width:30px;
height:30px;
background-color:#ffffff;
transform:rotate(45deg);
}

@media screen and (max-width:360px) {
  #staff_message_body .arrow{
  top:30px;
  left:-7px;
  width:15px;
  height:15px;
  }
}


#staff_message_body h2{
margin-bottom:25px;
font-size:215%;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
color:#005099;
}

#staff_message_body p{
font-size:115%;
line-height:1.8;
}

@media screen and (max-width:360px) {
  #staff_message_body h2{
  margin-bottom:10px;
  font-size:100%;
  }
  #staff_message_body p{
  font-size:100%;
  font-size:87.5%;
  line-height:1.5;
  }
}




/* メニュー：スタッフリスト */
.menu_stafflist{}

.menu_stafflist ul{
display:flex;
justify-content:space-around;
justify-content:space-between;
flex-wrap:wrap;
}

@media screen and (max-width:360px) {
  .menu_stafflist{
  padding:0 10px;
  }

  .menu_stafflist ul{
  display:flex;
  justify-content:space-around;
  justify-content:space-between;
  flex-wrap:wrap;
  }
}

.menu_stafflist ul li{}

@media screen and (max-width:360px) {
  .menu_stafflist ul li{
  margin-bottom:10px;
  width:16.66666666%;
  }
}


.menu_stafflist ul li .btn_stafflist{
margin-bottom:8px;
text-align:center;
}

@media screen and (max-width:360px) {
  .menu_stafflist ul li .btn_stafflist{
  margin-bottom:4px;
  }
}


.menu_stafflist ul li .btn_stafflist a img{
box-sizing: border-box;
border:2px solid #ffffff;
filter:saturate(100%);
filter:saturate(70%);
filter:saturate(30%);
filter:sepia(100%);
filter:brightness(50%);
transition:0.3s;
}

.menu_stafflist ul li .btn_stafflist a:hover img{
border:2px solid #ff6c00;
border:2px solid #ff0000;
filter:saturate(100%);
filter:sepia(0%);
filter:brightness(100%);
opacity:1.0;
}

/* 個別処理 */
#menu_stafflist01 ul li:nth-child(1) .btn_stafflist a img,
#menu_stafflist02 ul li:nth-child(2) .btn_stafflist a img,
#menu_stafflist03 ul li:nth-child(3) .btn_stafflist a img,
#menu_stafflist04 ul li:nth-child(4) .btn_stafflist a img,
#menu_stafflist05 ul li:nth-child(5) .btn_stafflist a img,
#menu_stafflist06 ul li:nth-child(6) .btn_stafflist a img,
#menu_stafflist07 ul li:nth-child(7) .btn_stafflist a img,
#menu_stafflist08 ul li:nth-child(8) .btn_stafflist a img,
#menu_stafflist09 ul li:nth-child(9) .btn_stafflist a img,
#menu_stafflist10 ul li:nth-child(10) .btn_stafflist a img,
#menu_stafflist11 ul li:nth-child(11) .btn_stafflist a img,
#menu_stafflist12 ul li:nth-child(12) .btn_stafflist a img{
border:2px solid #ff6c00;
border:2px solid #ff0000;
filter:saturate(100%);
filter:sepia(0%);
filter:brightness(100%);
opacity:1.0;
}


.menu_stafflist ul li p{
line-height:1.2;
text-align:center;
color:#ffffff;
}

@media screen and (max-width:360px) {
  .menu_stafflist ul li p{
  font-size:87.5%;
  line-height:1.2;
  }
}