@charset "UTF-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

info CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Variables CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

SVG CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/**
 * SVG画像をアイコンに使いたい的ないろいろ
 *
 *  [Html] SVG塗りつぶしの色をBackground-Imageとして扱うときに変更する
 * https://code.i-harness.com/ja/q/cbfa3c
 */
/* Variables
-------------------------------------------- */
#container .contHeading.staff-visual {
  align-items: flex-end; }
  #container .contHeading.staff-visual .ttlWrap {
    width: 100%;
    padding: 25px 20px;
    text-align: center; }
  @media screen and (max-width: 1220px) {
    #container .contHeading.staff-visual {
      height: 50vw;
      background-image: url(/recruit/shr/img/staff/main_img_tb.jpg) !important;
      background-position: top center; } }
  @media (max-width: 480px) {
    #container .contHeading.staff-visual {
      height: 75vh;
      background-image: url(/recruit/shr/img/staff/main_img_sp.jpg) !important;
      background-position: center center; } }
#container .staff .staffList {
  display: flex;
  flex-wrap: wrap; }
  #container .staff .staffList li {
    width: 24.17%;
    max-width: 290px;
    margin: 0 1.10666% 20px 0; }
    #container .staff .staffList li:nth-child(4n) {
      margin: 0 0 20px 0; }
    #container .staff .staffList li a {
      display: block;
      position: relative; }
    #container .staff .staffList li .profile {
      width: 100%;
      height: 114px;
      box-sizing: border-box;
      padding: 10px 18px;
      background: #80212e;
      position: absolute;
      left: 0;
      bottom: 0; }
      #container .staff .staffList li .profile .position, #container .staff .staffList li .profile .name {
        color: #FFF; }
      #container .staff .staffList li .profile .position {
        font-size: 1.8rem;
        line-height: 1.4;
        margin: 0 0 11px; }
      #container .staff .staffList li .profile .name {
        font-size: 3rem;
        line-height: 1; }
  @media screen and (max-width: 1220px) {
    #container .staff .staffList li .profile .position {
      font-size: 1.4vw; }
    #container .staff .staffList li .profile .name {
      font-size: 3vw; } }
  @media screen and (max-width: 800px) {
    #container .staff .staffList li {
      width: 32%;
      margin: 0 2% 20px 0; }
      #container .staff .staffList li:nth-child(4n) {
        margin: 0 2% 20px 0; }
      #container .staff .staffList li:nth-child(3n) {
        margin: 0 0 20px 0; }
      #container .staff .staffList li .profile {
        height: 12.5vw;
        padding: 10px; }
        #container .staff .staffList li .profile .position {
          font-size: 1.8vw; }
        #container .staff .staffList li .profile .name {
          font-size: 3vw; } }
  @media screen and (max-width: 640px) {
    #container .staff .staffList li .profile {
      height: 18vw;
      padding: 10px; } }
  @media (max-width: 480px) {
    #container .staff .staffList li {
      width: 49%;
      max-width: none;
      margin: 0 2% 30px 0;
      position: relative; }
      #container .staff .staffList li:nth-child(4n) {
        margin: 0 0 30px 0; }
      #container .staff .staffList li:nth-child(3n) {
        margin: 0 2% 20px 0; }
      #container .staff .staffList li:nth-child(2n) {
        margin: 0 0 30px 0; }
      #container .staff .staffList li a {
        padding: 0 0 20px; }
      #container .staff .staffList li .profile {
        height: 100px; }
        #container .staff .staffList li .profile .position {
          font-size: 1.2rem;
          line-height: 1.4;
          margin: 0 0 11px; }
        #container .staff .staffList li .profile .name {
          font-size: 1.6rem; } }