@charset "utf-8";

/* ふわっと表示↓*/
.element {
  /* 最初は非表示 */
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;

}

/* フェードイン時に入るクラス */
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* ふわっと表示↑*/

body {
  font-family: 'Noto Sans JP', sans-serif;
}

/*↓コンテンツ1*/
.content1img {
  width: 475px;
  margin: 0 auto;
  display: block;
  padding-top: 4.2%;
  padding-bottom: 4.2%;
}

#content1 {
  background-image: url("../img/staff/background1.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  padding-top: 140px;
}

/*↑コンテンツ1*/

/*↓コンテンツ2*/
/*↓スタッフ紹介*/

.staffflex {
  display: flex;
  justify-content: center;
  margin-top: 5%;
  margin-bottom: 3%;
  padding-bottom: 2%;
  padding-top: 1.5%;
}

.staffwidth {
  max-width: 1920px;
  position: relative;
  margin: 0 auto;
}

.staffall {
  background-image: url("../img/staff/background2.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.staffall2 {
  background-image: url("../img/staff/background2.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.staffillust {
  width: 245px;
  margin: 0 auto;
  display: block;
}

.message {
  font-size: 15px;
}

.staffall p {
  font-size: 17px;
  color: #231815;
  font-weight: 800;
  line-height: 160%;
}

.staffall h5 {
  text-align: center;
}

.staffall2 p {
  font-size: 17px;
  color: #231815;
  font-weight: 800;
  line-height: 160%;
}

.staffall2 h5 {
  text-align: center;
}

.staff1 {
  margin-right: 4%;
}

.staff2 {
  margin-left: 4%;
}

.staff22 {
  margin-left: 4%;
  opacity: 0;
}

.staff3 {
  opacity: 0;
}

/*↑スタッフ紹介*/



.zukei1 {
  position: absolute;
  width: min(calc((100 / 1500) * 115vw), 115px);
  left: 20%;
  top: 45%;
}

.zukei2 {
  position: absolute;
  width: min(calc((100 / 1500) * 80vw), 80px);
  right: 20%;
  top: -2%;
}

.zukei3 {
  position: absolute;
  width: min(calc((100 / 1500) * 80vw), 80px);
  left: 22%;
  top: 45%;
}

.zukei4 {
  position: absolute;
  width: min(calc((100 / 1500) * 120vw), 120px);
  right: 20%;
  top: 75%;
}

.zukei5 {
  position: absolute;
  width: min(calc((100 / 1500) * 105vw), 105px);
  left: 20%;
  top: 40%;
}

.zukei6 {
  position: absolute;
  width: min(calc((100 / 1500) * 80vw), 80px);
  right: 20%;
  bottom: -20%;
}

.zukei7 {
  position: absolute;
  width: min(calc((100 / 1500) * 115vw), 115px);
  left: 20%;
  top: 40%;
}

/*↑コンテンツ2*/

/*↓コンテンツ3*/
.content3flex {
  display: flex;
  justify-content: center;
  margin-top: 10%;
  margin-bottom: 5%;
}

.content3button1 {
  width: min(calc((100 / 1500) * 540vw), 540px);
  margin-right: 1.5%;
}

.content3button1::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: min(calc((100 / 1500) * 60vw), 60px);
  height: min(calc((100 / 1500) * 60vw), 60px);
  left: -10px;
  top: 30%;
  background-image: url(../img/staff/buttonyajirusi.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 30;
}

.content3button1:hover:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: min(calc((100 / 1500) * 60vw), 60px);
  height: min(calc((100 / 1500) * 60vw), 60px);
  left: 0;
  top: 30%;
  background-image: url(../img/staff/buttonyajirusi.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 30;
}

.content3button2 img {
  width: min(calc((100 / 1500) * 530vw), 530px);
  margin-left: 1.5%;
}

/*↑コンテンツ3*/

/*↓sp追記*/
.staffall3 {
  display: none;
}

.spcontent3button {
  display: none;
}

.spzukei1 {
  display: none;
}

.spzukei2 {
  display: none;
}

.spzukei3 {
  display: none;
}

.spzukei4 {
  display: none;
}

.spzukei5 {
  display: none;
}

.spzukei6 {
  display: none;
}

.spzukei7 {
  display: none;
}

.spzukei8 {
  display: none;
}

.spzukei9 {
  display: none;
}

.spzukei10 {
  display: none;
}

.spzukei11 {
  display: none;
}

.spzukei12 {
  display: none;
}

.spzukei13 {
  display: none;
}

/*↑sp追記*/


/*↓図形*/
@media screen and (max-width :1640px) {
  .zukei1 {
    left: 15%;
  }

  .zukei2 {
    right: 15%;
  }

  .zukei3 {
    left: 17%;
  }

  .zukei4 {
    right: 15%;
  }

  .zukei5 {
    left: 15%;
  }

  .zukei6 {
    right: 15%;
  }

  .zukei7 {
    left: 15%;
  }
}

@media screen and (max-width :1300px) {
  .zukei1 {
    left: 13%;
  }

  .zukei2 {
    right: 13%;
  }

  .zukei3 {
    left: 15%;
  }

  .zukei4 {
    right: 13%;
  }

  .zukei5 {
    left: 13%;
  }

  .zukei6 {
    right: 13%;
  }

  .zukei7 {
    left: 13%;
  }
}

@media screen and (max-width :950px) {
  .zukei1 {
    left: 9%;
  }

  .zukei2 {
    right: 9%;
  }

  .zukei3 {
    left: 11%;
  }

  .zukei4 {
    right: 9%;
  }

  .zukei5 {
    left: 9%;
  }

  .zukei6 {
    right: 9%;
  }

  .zukei7 {
    left: 9%;
  }
}

/*↑図形*/

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

  .webcontent3button {
    display: none;
  }

  .spcontent3button {
    display: block;
  }

  .webzukei {
    display: none;
  }

  .staff22 {
    display: none;
  }

  /*↓コンテンツ１*/
  #content1 {
    padding-top: 70px;
  }

  .content1img {
    padding-top: 15.5%;
    padding-bottom: 15.5%;
    max-width: 335px;
    width: 90%;
  }

  /*↑コンテンツ１*/

  /*↓コンテンツ2*/
  .staffall {
    background-image: url("../img/staff/staff_sp/sp_backgroundimage2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .staffall2 {
    background-image: url("../img/staff/staff_sp/backgroundwhite.png");
    background-repeat: no-repeat;
    background-size: cover;
  }




  .staffflex {
    display: block;
    position: relative;
  }

  .staffall h5 {
    font-size: 20px;
    margin-bottom: 2%;
    margin-top: 6%;
  }

  .staffall2 h5 {
    font-size: 20px;
    margin-bottom: 2%;
    margin-top: 6%;
  }

  .name2 {
    font-size: 15px;
  }

  .staff1 {
    margin-right: 0;
    padding-top: 23%;
  }

  .staff2 {
    margin-left: 0;
  }

  .staff2posi {
    padding-top: 29%;
  }

  .staffall p {
    padding-bottom: 22%;
    margin: 0 auto;
    display: block;
    width: 315px;
  }

  .staffall2 p {
    padding-bottom: 22%;
    margin: 0 auto;
    display: block;
    width: 315px;
  }

  .staffall3 h5 {
    font-size: 20px;
    margin-bottom: 2%;
    margin-top: 6%;
    text-align: center;
  }

  .staffall3 p {
    font-size: 17px;
    color: #231815;
    font-weight: 800;
    line-height: 160%;
  }

  .staffall3 p {
    padding-bottom: 22%;
    margin: 0 auto;
    display: block;
    width: 300px;
  }

  /*↑コンテンツ2*/

  /*↓図形*/
  .spzukei1 {
    top: 2%;
    width: 90px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei2 {
    top: 50%;
    width: 70px;
    right: 5%;
    position: absolute;
    display: block;
  }

  .spzukei3 {
    top: 2%;
    width: 90px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei4 {
    top: 50%;
    width: 70px;
    right: 5%;
    position: absolute;
    display: block;
  }

  .spzukei5 {
    top: 2%;
    width: 90px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei6 {
    top: 50%;
    width: 70px;
    right: 5%;
    position: absolute;
    display: block;
  }

  .spzukei7 {
    top: 2%;
    width: 90px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei8 {
    top: 50%;
    width: 70px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei9 {
    top: 2%;
    width: 90px;
    right: 5%;
    position: absolute;
    display: block;
  }

  .spzukei10 {
    top: 50%;
    width: 70px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei11 {
    top: 2%;
    width: 90px;
    right: 5%;
    position: absolute;
    display: block;
  }

  .spzukei12 {
    top: 50%;
    width: 70px;
    left: 5%;
    position: absolute;
    display: block;
  }

  .spzukei13 {
    top: 2%;
    width: 70px;
    left: 5%;
    position: absolute;
    display: block;
  }

  /*↑図形*/


  /*↓コンテンツ3*/
  .content3flex {
    margin-top: 15%;
    margin-bottom: 15%;
  }

  .content3button1 {
    margin-right: 0;
  }

  .content3button1::before {
    display: none;
  }

  .content3button1 img {
    width: 97.5%;
    margin-bottom: 4%;
  }

  .content3button2 img {
    margin-left: 0;
    width: 95%;
    display: block;
    margin: 0 auto;
  }

  /*↑コンテンツ3*/
}