@charset "UTF-8";
/*! このファイルを変更する場合は「.scss」から変更して下さい */
/*! 「.scss」ファイルがつかえない場合はcustom.cssを変更する */
/* ボタンカラー */
/* フォント系 */
/*
	Noto Sans使用する場合
	'Noto Sans JP', 'Open Sans', Verdana, Roboto, 'Droid Sans'
*/
/*! このファイルを変更する場合は「.scss」から変更して下さい */
/*! 「.scss」ファイルがつかえない場合はcustom.cssを変更する */
#staff-index {
  /* アンカー */
  /* スタッフ紹介 */
}
#staff-index .section__title {
  margin-bottom: 120px;
}
#staff-index .section__title .title__text {
  position: relative;
}
#staff-index .section__title .title__text::after {
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 120%;
  height: 2px;
  background-color: #000;
}
#staff-index .staff-index__anchor {
  background-color: #f6f6f6;
  padding: clamp(30px, 8vw, 50px) 0;
}
#staff-index .staff-index__anchor .anchor__list {
  display: grid;
  gap: 5%;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0;
}
#staff-index .staff-index__anchor .anchor__list .list__item {
  flex: 1;
}
#staff-index .staff-index__anchor .anchor__list .list__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  text-align: center;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  height: 5em;
  transition: color 0.4s ease-out;
}
#staff-index .staff-index__anchor .anchor__list .list__item a:hover {
  color: #00a2d9;
}
#staff-index .staff-index__block {
  padding-top: clamp(60px, 16vw, 100px);
}
#staff-index .staff-index__block .shop-staff__title {
  position: relative;
  font-size: clamp(14px, 3.73333vw, 16px);
  font-weight: normal;
  padding-bottom: 0.3em;
  margin-bottom: 2.5em;
}
#staff-index .staff-index__block .shop-staff__title::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 20em;
  max-width: 100%;
  height: 1px;
  background-color: #000;
}
#staff-index .staff-index__block .shop-staff__list {
  display: grid;
  row-gap: clamp(20px, 5.33333vw, 40px);
  -moz-column-gap: 2%;
       column-gap: 2%;
  grid-template-columns: repeat(5, 1fr);
}
#staff-index .staff-index__block .staff-card {
  color: #000;
  text-decoration: none;
}
#staff-index .staff-index__block .staff-card:hover .staff-card__image img {
  transform: scale(1.06);
}
#staff-index .staff-index__block .staff-card .staff-card__image {
  position: relative;
  aspect-ratio: 650/434;
  overflow: hidden;
}
#staff-index .staff-index__block .staff-card .staff-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 0.5, 0.43, 1);
}
#staff-index .staff-index__block .staff-card .staff-card__content {
  font-size: clamp(14px, 3.73333vw, 16px);
  padding: 0.6em 0;
  text-align: center;
}
#staff-index .staff-index__block .staff-card .staff-card__content .content__en-name,
#staff-index .staff-index__block .staff-card .staff-card__content .content__position {
  line-height: 1.5;
  font-size: 0.75em;
}
#staff-index .staff-index__block .staff-card .staff-card__content .content__en-name {
  margin-bottom: 0.5em;
}
#staff-index .staff-index__block .staff-card .staff-card__content .content__position {
  margin-bottom: 0;
}

/* ========================================================
  画面幅768px以下のスタイル
=========================================================*/
@media screen and (max-width: 768px) {
  #staff-index {
    /* アンカー */
    /* スタッフ紹介 */
  }
  #staff-index .section__title {
    margin-bottom: 70px;
  }
  #staff-index .staff-index__anchor .anchor__list {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 5.33333vw, 30px) 5%;
  }
  #staff-index .staff-index__block .shop-staff__list {
    -moz-column-gap: 3%;
         column-gap: 3%;
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ========================================================
  画面幅480px以下のスタイル
=========================================================*/
@media screen and (max-width: 480px) {
  #staff-index {
    /* アンカー */
    /* スタッフ紹介 */
  }
  #staff-index .staff-index__anchor .anchor__list {
    grid-template-columns: auto;
  }
  #staff-index .staff-index__block .shop-staff__list {
    -moz-column-gap: 4%;
         column-gap: 4%;
    grid-template-columns: repeat(2, 1fr);
  }
}