/* 歯科医師・スタッフ紹介（参考 .home-staff）
   見出しと文を横に並べ、縦長の写真を中央に寄せて横に送る（4秒ごとに自動）。写真の下に役職・名前・ひとこと。
   淡い黄色の四角を2つ、写真の奥に置く。顔写真の代わりに、その人の仕事にちなんだ写真を使う */
.member {
  position: relative;
  z-index: 0;
  overflow-x: clip;
}
.member__inner { padding-top: 78px; padding-bottom: 90px; }
.member__header { position: relative; z-index: 1; }
.member__header-txt { margin-top: 10px; }

.slider { position: relative; margin-top: 45px; }
.slider::before {
  content: "";
  position: absolute;
  top: -88px;
  right: -25px;
  width: 156px;
  height: 156px;
  background: var(--yellow-pale);
}
.slider__view { position: relative; }
.slider__track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
}
.slider__track.is-moving { transition: transform 0.5s ease; }
.slider__item { flex: none; width: 180px; margin: 0 20px; }
.slider__item a { display: block; }
.slider__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--panel); }
.slider__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.slider__sub { display: block; margin-top: 15px; font-size: 11px; line-height: 1.5; transition: color 0.3s ease; }
.slider__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.slider__msg { display: block; margin-top: 8px; font-size: 12px; line-height: 1.75; }

.slider__ui {
  position: relative;
  margin-top: 30px;
  padding-top: 29px;
  border-top: 1px solid var(--ink);
}
.slider__arrows {
  display: flex;
  justify-content: space-between;
  width: 100px;
  margin: 0 auto;
}
.slider__arrow { width: 30px; height: 14px; }
.slider__arrow svg { width: 30px; height: 14px; transition: color 0.3s ease; }
.slider__arrow--prev svg { transform: rotate(180deg); }
.slider__num {
  position: absolute;
  top: 29px;
  right: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
}

@media (min-width: 1024px) {
  .member__inner { max-width: 1580px; padding: 197px 40px 200px; }
  .member__header { display: flex; align-items: flex-start; }
  .member__header-in { flex: none; }
  .member__header-txt { max-width: 560px; margin: 8px 0 0 110px; }
  .slider { margin-top: 60px; }
  .slider::before { top: -70px; left: 50%; right: auto; width: 180px; height: 180px; margin-left: 420px; }
  .slider::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: 50%;
    z-index: -1;
    width: 280px;
    height: 280px;
    margin-left: -660px;
    background: var(--yellow-pale);
  }
  .slider__item { width: 300px; margin: 0 45px; }
  .slider__item a:hover .slider__img img { transform: scale(1.1); }
  .slider__item a:hover .slider__sub,
  .slider__item a:hover .slider__name { color: var(--sky-deep); }
  .slider__item a:hover .slider__name { letter-spacing: 0.3em; }
  .slider__sub { margin-top: 25px; font-size: 14px; }
  .slider__name { margin-top: 5px; font-size: 20px; }
  .slider__msg { font-size: 13px; }
  .slider__ui { margin-top: 60px; padding-top: 50px; }
  .slider__arrows { position: absolute; top: 75px; right: 86px; width: 91px; margin: 0; }
  .slider__arrow:hover svg { color: var(--sky-deep); }
  .slider__num { top: 76px; font-size: 15px; }
  .member__btn { margin-top: 0; }
}