@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
  #staff .system-list {
  }

  #staff .system-pic {
    background: #181c62;
    border-radius: 50%;
    height: 320px;
    margin-inline: auto;
    position: relative;
    width: 320px;
    margin-bottom: 8px;
    padding: 4px;
  }

  #staff .system-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 300px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
  }

  #staff .system-pic img {
    border-radius: 50%;
    height: 250px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
  }

  #staff .system-ttl {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2.1428571429;
    margin-bottom: 0;
    text-align: center;
  }

  #staff .system-list .system-job {
    /* 折り返しで「ー」や小書き文字が行頭に来ないようにする（日本語の禁則） */
    line-break: strict;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2;
    text-align: center;
    /* 役職が2行になる方がいるため、全員で2行分を確保して氏名の位置を揃える
       （line-height:2 なので 1行=2em） */
    min-height: 4em;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #staff main.is-single {
  }

  #staff main.is-single .system-contents02 {
  }

  #staff main.is-single .system-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: center;
  }

  #staff main.is-single .system-content-left {
  }

  #staff main.is-single .system-content-right {
  }

  #staff main.is-single .system-i-pic {
    background: #181c62;
    border-radius: 50%;
    height: 560px;
    margin-inline: auto;
    position: relative;
    width: 560px;
    margin-bottom: 8px;
  }

  #staff main.is-single .system-i-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 500px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
  }

  #staff main.is-single .system-i-pic img {
    border-radius: 50%;
    height: 420px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    padding: 4px;
  }

  #staff main.is-single .system-job {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2;
    text-align: center;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1300px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1300px) {
  #staff main.is-single .system-i-pic {
    background: #181c62;
    border-radius: 50%;
    height: 43.077vw;
    margin-inline: auto;
    position: relative;
    width: 43.077vw;
    margin-bottom: 0.615vw;
  }

  #staff main.is-single .system-i-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 38.462vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 38.462vw;
  }

  #staff main.is-single .system-i-pic img {
    border-radius: 50%;
    height: 32.308vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32.308vw;
    padding: 0.308vw;
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1100px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  #staff .system-pic {
    background: #181c62;
    border-radius: 50%;
    height: 29.091vw;
    margin-inline: auto;
    position: relative;
    width: 29.091vw;
    margin-bottom: 0.727vw;
    padding: 0.364vw;
  }

  #staff .system-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 27.273vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 27.273vw;
  }

  #staff .system-pic img {
    border-radius: 50%;
    height: 22.727vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22.727vw;
  }

  /* この幅ではカードが狭く、役職が3行になる方がいるので3行分を確保する */
  #staff .system-list .system-job {
    min-height: 6em;
  }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #staff .system-list {
  }

  #staff .system-pic {
    background: #181c62;
    border-radius: 50%;
    height: 40vw;
    margin-inline: auto;
    position: relative;
    width: 40vw;
    margin-bottom: 1.932vw;
    padding: 0.966vw;
  }

  #staff .system-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 36vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36vw;
  }

  #staff .system-pic img {
    border-radius: 50%;
    height: 30vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
  }

  #staff .system-ttl {
    font-size: 3.865vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2.1428571429;
    margin-bottom: 0;
    text-align: center;
  }

  #staff .system-list .system-job {
    /* 折り返しで「ー」や小書き文字が行頭に来ないようにする（日本語の禁則） */
    line-break: strict;
    font-size: 3.623vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2;
    text-align: center;
    /* スマホは2列で幅が狭く、役職が3行になる方がいるので3行分を確保する */
    min-height: 6em;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #staff main.is-single .system-i-pic {
    background: #181c62;
    border-radius: 50%;
    height: 80vw;
    margin-inline: auto;
    position: relative;
    width: 80vw;
    margin-bottom: 1.932vw;
  }

  #staff main.is-single .system-i-pic:before {
    background: url(../images/staff/staff_slider_en.svg) no-repeat center
      center/contain;
    content: "";
    height: 72vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72vw;
  }

  #staff main.is-single .system-i-pic img {
    border-radius: 50%;
    height: 64vw;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64vw;
    padding: 0.966vw;
  }

  #staff main.is-single .system-job {
    font-size: 3.865vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2;
    text-align: center;
  }
}