@charset "UTF-8";

/* Scss Document */

.body {

  position: relative; }



/***************************************/

.head {

  text-align: center;

  font: 20px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

  font-weight: 500;

  padding: 0 20px; }



/***************************************/

.staff {

  padding: 0 0 250px; }



.staff_box.cardiology_box {

  margin: 0 auto 100px; }

  .staff_box.cardiology_box h2 {

    color: #ec6d7b;

    position: relative;

    padding: 60px 0 0; }

    .staff_box.cardiology_box h2:before {

      position: absolute;

      content: "";

      top: 0%;

      left: 50%;

      -webkit-transform: translate(-50%, 0%);

      /* Safari用 */

      transform: translate(-50%, 0%);

      background: url("../images/common/icon_cardiology.svg") center center no-repeat;

      background-size: contain;

      width: 33px;

      height: 45px; }

  .staff_box.cardiology_box dt span {

    background-color: #ec6d7b; }

.staff_box.nephrology_box h2 {

  color: #008fc9;

  position: relative;

  padding: 50px 0 0; }

  .staff_box.nephrology_box h2:before {

    position: absolute;

    content: "";

    top: 0%;

    left: 50%;

    -webkit-transform: translate(-50%, 0%);

    /* Safari用 */

    transform: translate(-50%, 0%);

    background: url("../images/common/icon_nephrology.svg") center center no-repeat;

    background-size: contain;

    width: 56px;

    height: 36px; }

.staff_box.nephrology_box dt span {

  background-color: #008fc9; }



.staff_box {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-justify-content: flex-start;

  justify-content: flex-start;

  align-items: flex-start;

  max-width: 1080px;

  width: calc(100% - 80px);

  margin: 0 auto; }

  .staff_box h2 {

    font: 24px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    width: 100%;

    text-align: center;

    margin: 0 0 40px; }

  .staff_box .staff_item {

    position: relative;

    max-width: 200px;

    width: calc((100% - 279px)/4);

    margin: 0 93px 50px 0;

    /*&:hover{

      .pic{

        img{

          height: 110%;

        }

      }

    }*/ }

    .staff_box .staff_item:nth-of-type(4n) {

      margin: 0 0 50px; }

    .staff_box .staff_item a {

      position: absolute;

      content: "";

      display: block;

      width: 100%;

      height: 100%;

      top: 50%;

      left: 50%;

      -webkit-transform: translate(-50%, -50%);

      /* Safari用 */

      transform: translate(-50%, -50%);

      z-index: 1; }

    .staff_box .staff_item .pic {

      width: 200px;

      height: 235px;

      position: relative;

      margin: 0 0 15px;

      overflow: hidden;

      background-color: #efefef; }

      .staff_box .staff_item .pic img {

        transition: .3s;

        height: 100%;

        width: auto;

        position: absolute;

        top: 50%;

        left: 50%;

        -webkit-transform: translate(-50%, -50%);

        /* Safari用 */

        transform: translate(-50%, -50%); }

  .staff_box dt {

    font: 18px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    margin: 0 0 10px; }

    .staff_box dt span {

      margin: 10px 0 0;

      display: inline-block;

      font: 13px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 400;

      background-color: #000;

      color: #ffff;

      padding: 3px 5px; }

  .staff_box dd {

    font: 15px/1.6em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 400; }



@keyframes staff_box {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@media (min-width: 1024px) and (hover: hover) {

  .staff_box .staff_item:hover .pic img {

    height: 110%; } }

@media (max-width: 1280px) {

  .staff_box {

    max-width: 920px;

    width: calc(100% - 80px);

    margin: 0 auto; }

    .staff_box .staff_item {

      position: relative;

      max-width: 200px;

      width: calc((100% - 120px)/4);

      margin: 0 40px 50px 0; } }

/*max-width:1280px*/

@media (max-width: 1024px) {

  .staff_box {

    max-width: 640px;

    width: calc(100% - 80px);

    margin: 0 auto; }

    .staff_box .staff_item {

      position: relative;

      max-width: 200px;

      width: calc((100% - 80px)/3);

      margin: 0 40px 50px 0; }

      .staff_box .staff_item:nth-of-type(4n) {

        margin: 0 40px 50px 0; }

      .staff_box .staff_item:nth-of-type(3n) {

        margin: 0 0 50px; } }

/*max-width:1024px*/

@media (max-width: 768px) {

  .staff_box {

    max-width: 440px;

    width: calc(100% - 80px);

    margin: 0 auto; }

    .staff_box .staff_item {

      position: relative;

      max-width: 200px;

      width: calc((100% - 40px)/2);

      margin: 0 40px 50px 0; }

      .staff_box .staff_item:nth-of-type(4n) {

        margin: 0 40px 50px 0; }

      .staff_box .staff_item:nth-of-type(3n) {

        margin: 0 40px 50px 0; }

      .staff_box .staff_item:nth-of-type(2n) {

        margin: 0 0px 50px 0; } }

/*max-width:768px*/

@media (max-width: 480px) {

  .staff_box {

    max-width: 440px;

    width: calc(100% - 40px); }

    .staff_box .staff_item {

      position: relative;

      max-width: 200px;

      width: calc((100% - 20px)/2);

      margin: 0 20px 30px 0; }

      .staff_box .staff_item:nth-of-type(4n), .staff_box .staff_item:nth-of-type(3n) {

        margin: 0 20px 30px 0; }

      .staff_box .staff_item:nth-of-type(2n) {

        margin: 0 0px 30px 0; }

      .staff_box .staff_item .pic {

        width: 100%;

        height: 0;

        padding: 115% 0 0;

        position: relative;

        margin: 0 0 15px;

        overflow: hidden; }

    .staff_box dt {

      font: 22px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 500;

      margin: 0 0 8px; }

    .staff_box dd {

      font: 15px/1.5em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 400; } }

/*max-width:480px*/

/***************************************/

* {

  margin: 0;

  padding: 0; }



/* モーダル全体(背景＋本体) */

.modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  height: 100vh;

  width: 100%;

  z-index: 99999; }



/* モーダル背景 */

.modal-bg {

  position: absolute;

  height: 100vh;

  width: 100%;

  background: rgba(0, 0, 0, 0.8); }



/* モーダル本体 */

.modal-content {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  overflow: scroll;

  height: 90%;

  width: 90%;

  background: white;

  padding: 60px;

  max-width: 1080px; }

  .modal-content .js-modal-close {

    max-width: 300px;

    width: calc(100% - 40px);

    display: block;

    border: 1px solid #dcdddd;

    font: 15px/50px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    color: #595757;

    padding: 0 20px 0 0;

    margin: 0 auto;

    position: relative;

    text-align: center; }

    .modal-content .js-modal-close:before {

      position: absolute;

      content: "×";

      color: #b5b5b6;

      font: 15px/31px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 700;

      right: 15px;

      top: 8px; }

    .modal-content .js-modal-close.top_close {

      position: absolute;

      right: 15px;

      top: 15px;

      width: 40px;

      height: 40px; }

      .modal-content .js-modal-close.top_close:before {

        position: absolute;

        content: "×";

        color: #b5b5b6;

        font: 20px/38px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 700;

        right: 0;

        top: 0;

        text-align: center;

        width: 100%; }



body.fixed {

  position: fixed;

  width: 100%;

  height: 100%;

  left: 0; }



.modal_box {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  align-items: flex-start;

  margin: 0 0 50px; }

  .modal_box .pic {

    width: 300px;

    text-align: center; }

    .modal_box .pic img {

      width: 100%;

      height: auto; }

  .modal_box .txt {

    width: calc(100% - 350px);

    padding: 10px 0 0; }

    .modal_box .txt p {

      font: 15px/2.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 400;

      margin: 0 0 20px; }

    .modal_box .txt.pink .ttl {

      color: #ec6d7b; }

      .modal_box .txt.pink .ttl:before {

        position: absolute;

        content: "";

        display: block;

        background: url("../images/common/icon_cardiology.svg") center center no-repeat;

        background-size: contain;

        width: 27px;

        height: 35px;

        left: 10px;

        top: -7px; }

    .modal_box .txt.pink dt, .modal_box .txt.pink .message {

      background-color: #ec6d7b; }

    .modal_box .txt.blue .ttl {

      color: #008fc9;

      padding: 0 0 0 55px; }

      .modal_box .txt.blue .ttl:before {

        position: absolute;

        content: "";

        display: block;

        background: url("../images/common/icon_nephrology.svg") center center no-repeat;

        background-size: contain;

        width: 40px;

        height: 25px;

        left: 5px;

        top: -2px; }

    .modal_box .txt.blue dt, .modal_box .txt.blue .message {

      background-color: #008fc9; }

  .modal_box p.ttl {

    font: 17px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    margin: 0 0 30px;

    padding: 0 0 0 50px;

    position: relative; }

  .modal_box p.message {

    width: 80px;

    background-color: #ccc;

    color: #fff;

    font: 13px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    text-align: center;

    margin: 0 0 5px; }

  .modal_box p.staff_name {

    margin: 0 0 20px;

    font: 22px/1.5em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500; }

    .modal_box p.staff_name span {

      display: block;

      font: 13px/1.5em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 500; }

  .modal_box dl {

    margin: 0 0 45px; }

  .modal_box dt {

    width: 80px;

    background-color: #ccc;

    color: #fff;

    font: 13px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500;

    text-align: center;

    margin: 0 0 5px; }

  .modal_box dd {

    margin: 0 0 15px;

    font: 15px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

    font-weight: 500; }



/*max-width:1280px*/

@media (max-width: 1024px) {

  .modal-content {

    padding: 40px; }



  .modal_box {

    margin: 0 0 50px; }

    .modal_box .pic {

      width: 230px; }

    .modal_box .txt {

      width: calc(100% - 260px); }

    .modal_box dl {

      flex-direction: column;

      margin: 0 0 25px; }

    .modal_box dt {

      text-align: center;

      margin: 0 0 5px; }

    .modal_box dd {

      margin: 0 0 15px;

      width: 100%;

      padding: 0; } }

/*max-width:1024px*/

@media (max-width: 768px) {

  .modal-content {

    padding: 40px 30px; }

    .modal-content .js-modal-close.top_close {

      width: 30px;

      height: 30px; }

      .modal-content .js-modal-close.top_close:before {

        font: 20px/28px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 700; }



  .modal_box {

    margin: 0 0 50px; }

    .modal_box .pic {

      width: 100%;

      text-align: center; }

      .modal_box .pic img {

        width: auto;

        max-height: 400px; }

    .modal_box .txt {

      width: 100%;

      padding: 15px 0 0; } }

/*max-width:768px*/

@media (max-width: 480px) {

  .modal-content {

    padding: 20px 20px 40px; }



  .modal_box {

    margin: 0 0 50px; }

    .modal_box .pic img {

      max-height: 300px; } }

/*max-width:768px*/