@charset "UTF-8";

#feature .sec__staff .btn__group {
  column-gap: 15px;
  width: 595px;
  margin: 110px auto 0;
}
#feature .sec__staff .btn__group__column {
  flex: 1;
}
#feature .sec__staff .btn__group__column a {
  width: 100%;
  height: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 700 18px/1.6 "Noto Sans JP", sans-serif;
  text-align: center;
}
#feature .sec__staff .btn__totop {
  margin: 40px auto 0;
  text-align: center;
}
#feature .sec__staff .btn__totop a {
  position: relative;
  color: #000;
  margin: 0.5em;
  font: 700 18px/1 "Roboto", sans-serif;
}
#feature .sec__staff .btn__totop a:hover, #feature .sec__staff .btn__totop a:valid {
  color: #000;
}
#feature .sec__staff .btn__totop a span {
  position: relative;
}
#feature .sec__staff .btn__totop a span::before {
  font: 300 1.4em/1 'Material Symbols Outlined';
  content: '\e88a';
  position: absolute;
  top: 0;
  left: -1.2em;
}
#feature .sec__staff .common__btn a {
  border: 1px solid #707070;
  border-radius: 5em;
  color: #000;
  margin: 0 auto;
  background: #FFF;
  transition: 0.5s;
}
#feature .sec__staff .common__btn a:hover, #feature .sec__staff .common__btn a:visited {
  color: #000;
}
#feature .sec__staff .common__btn a:hover {
  background: #FAFAFA;
  opacity: 0.5;
}


/* css pc */
#feature .sec__staff .flex {
  display: flex;
  /* flex-direction: column; */
}
#feature .sec__staff .staff {
  width: 820px;
  margin: 40px auto 0;
  column-gap: 43px;
}
#feature .sec__staff .staff__title {
  text-align: center;
  font: 700 34px/1 "Noto Sans JP", sans-serif;
  margin: 100px 0 0;
}
#feature .sec__staff .staff__column {
  flex: 1;
}
#feature .sec__staff .staff__thumb {
  width: 100px;
}
#feature .sec__staff .staff__intro {
  align-items: center;
  column-gap: 1em;
}
#feature .sec__staff .staff__detail {
  row-gap: 0.5em;
}
#feature .sec__staff .staff__detail span {
  display: block;
}
#feature .sec__staff .staff__chara {
  font: 700 16px/1 "Noto Sans JP", sans-serif;
  color: #AA9C76;
}
#feature .sec__staff .staff__name {
  font: 700 22px/1 "Noto Sans JP", sans-serif;
  margin: 0.2em 0 0;
}
#feature .sec__staff .staff__height {
  font: 500 16px/1 "Noto Sans JP", sans-serif;
  margin: 0.2em 0 0;
  color: #666;
}
#feature .sec__staff .staff__slide {
  margin: -20px 0 0;
}
#feature .sec__staff .staff__slide a {
  position: relative;
  display: block;
  margin: 20px 0 0;
}
#feature .sec__staff .splide {
  width: 387px;
  margin: 30px auto 0;
}
#feature .sec__staff .splide__arrow {
  background: #FFF;
  opacity: 1;
}
#feature .sec__staff .splide__arrow svg {
  fill: #000;
}


/*css sp*/
@media screen and (max-width: 768px) {
  #feature .sec__staff .flex.staff__intro {
    display: flex;
    flex-direction: row;
  }  
  #feature .sec__staff .staff {
    width: 100%;
    margin: calc(47 * (100vw / 375))auto 0;
    row-gap: calc(40 * (100vw / 375));
    flex-flow: column;
  }
  #feature .sec__staff .staff__title {
    font: 700 calc(22 * (100vw / 375))/1.4 "Noto Sans JP", sans-serif;
    margin: calc(80 * (100vw / 375)) 0 0;
  }
  #feature .sec__staff .staff__column {
    flex: 1;
  }
  #feature .sec__staff .staff__thumb {
    width: calc(80 * (100vw / 375));
  }
  #feature .sec__staff .staff__intro {
    width: calc(335 * (100vw / 375));
    margin: 0 auto;
  }
  #feature .sec__staff .staff__detail {
    row-gap: 0.5em;
  }
  #feature .sec__staff .staff__chara {
    font: 700 calc(14 * (100vw / 375))/1 "Noto Sans JP", sans-serif;
  }
  #feature .sec__staff .staff__name {
    font: 500 calc(20 * (100vw / 375))/1 "Noto Sans JP", sans-serif;
    margin: 0.2em 0 0;
  }
  #feature .sec__staff .staff__height {
    font: 400 calc(14 * (100vw / 375))/1 "Roboto", sans-serif;
    margin: 0.2em 0 0;
  }
  #feature .sec__staff .staff__slide {
    margin: calc(-20 * (100vw / 375)) 0 0;
  }
  #feature .sec__staff .staff__slide a {
    margin: calc(20 * (100vw / 375)) 0 0;
  }
  #feature .sec__staff .staff__slide a::before {
    top: calc(-20 * (100vw / 375));
    right: calc(30 * (100vw / 375));
    width: calc(100 * (100vw / 375));
  }
  #feature .sec__staff .splide {
    width: calc(335 * (100vw / 375));
    margin: 1rem auto 0;
  }
  #feature .sec__staff .btn__group {
    row-gap: calc(10 * (100vw / 375));
    column-gap: 0;
    width: calc(335 * (100vw / 375));
    margin: calc(80 * (100vw / 375)) auto 0;
  }
  #feature .sec__staff .btn__group.flex {
    display: flex;
    flex-direction: column;
  }
  #feature .sec__staff .btn__group__column {
    flex: 1;
  }
  #feature .sec__staff .btn__group__column a {
    width: calc(335 * (100vw / 375));
    height: calc(68 * (100vw / 375));
    font: 700 calc(16 * (100vw / 375))/1.6 "Noto Sans JP", sans-serif;
  }
  #feature .sec__staff .btn__totop {
    margin: calc(40 * (100vw / 375)) auto calc(100 * (100vw / 375));
  }
  #feature .sec__staff .btn__totop a {
    font: 700 calc(16 * (100vw / 375))/1 "Roboto", sans-serif;
  }
  
}