@charset "utf-8";
/* スタッフ一覧 */
#staff .career_header h1 {
  margin-bottom: 50px;
}
.career_header__nav li {
	display: block;
	width: 172px;
	text-align: center;
	font-size: 18px;
	color: #9E5246;
	line-height: 50px;
  cursor: pointer;
}
ul.selectlist li.on {
  background-color: #9E5246;
  color: #FFFFFF;
}
.staff_wrapper {
  max-width: 960px;
  margin: auto;
  padding: 0 1%;
  box-sizing: border-box;
}
ul.staffindex {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
ul.staffindex li {
  width: 19%;
  margin: 0.5% 0.5% 2%;
}
ul.staffindex li img.staffsimages {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 50%;
}
ul.staffindex li img.staffname {
  display: block;
  max-height: 16px;
  margin: 6px auto;
}
ul.staffindex li span.division {
  display: inline-block;
  text-align: center;
  color: #FFFFFF;
  margin: 0 0 2px;
  padding: 3px 15px;
  font-size: 12px;
  border-radius: 5px;
}
.staff_introduction__content p.position {
  font-weight: bold;
}
ul.staffindex li.product_development span.division,
.product_development .staff_introduction__content p.position {
  background: #9e3d3f;
}
ul.staffindex li.product span.division,
.product .staff_introduction__content p.position {
  background: #BF794E;
}
.director .staff_introduction__content p.position {
  background: #C89932;
}
/* スタッフ紹介ページ */
/* 共通処理 */
.staff_introduction .flex_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.staff_introduction .flex_box .staffimages {
  width: 49%;
}
.staff_introduction .catch {
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 15px;
  border-radius: 6px;
  padding: 15px;
}
.staff_introduction__content {
  width: 49%;
  text-align: center;
}
.staff_introduction__content .position {
  display: inline-block;
  padding: 5px 25px;
  border-radius: 5px;
  background: #BF794E;
  color: #FFFFFF;
  margin-bottom: 10px;
}
.staff_introduction dl {
  width: 49%;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #F8EFE4;
  box-sizing: border-box;
}
.staff_introduction dt {
  color: #9E5246;
}
.staff_introduction dd {
  margin: 10px 20px 0;
  font-weight: bold;
}
.staff_introduction #qa {
  align-items: stretch;
  font-size: 16px;
  justify-content: space-between;
}
.staff_introduction #qa dt span.qt {
  margin-right: 5px;
}
.staff_introduction #qa dt span.qt img {
  width: 14px;
  height: 28px;
}
.staff_introduction #qa dt span.qmain {
  font-weight: bold;
}
#staff a.link {
  display: block;
  width: 225px;
  margin: 80px auto;
  padding: 7px 0 3px;
  background: #9E5246;
  color: #FFFFFF;
  text-align: center;
  position: relative;
}
#staff a.link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55px;
  transform: translateY(-50%) rotate(-45deg);
  -ms-transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  width: 6px;
  height: 6px;
  border-top: solid 2px #FFFFFF;
  border-left: solid 2px #FFFFFF;
}
/**********************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
  .staff_wrapper {
    width: 100%;
  }
}

/**********************************************************************************************************************************************************************************/
@media screen and (max-width: 480px) {
  .staff_wrapper {
    padding: 0 3%;
  }
  #hakura .career_header__nav {
    max-width: 87vw;
  }
  #hakura .career_header__nav li {
    font-size: 4vw;
    width: 100%;
  }
  /*  スタッフ一覧 */
  ul.staffindex li {
    width: 49%;
    margin: 0.5% 0.5% 3%;
  }
  /* スタッフ紹介ページ */
  .staff_introduction .flex_box .staffimages,
  .staff_introduction__content {
    width: 100%;
  }
  .staff_introduction__content {
    margin: 40px 0 10px;
  }
  .staff_introduction #qa dl {
    width: 100%;
  }
}