/* 第4回で追加する登壇者とスライダー操作 */
.p-speaker__slider { position: relative; }
.p-speaker__next, .p-speaker__prev {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.p-speaker__next img, .p-speaker__prev img { display: block; width: 100%; height: 100%; }

.p-speaker__portrait {
  background: url('../img/navi-bg.webp') no-repeat center 18% / 100% auto;
}
.p-speaker__portrait > img { display: block; width: 86.74%; margin-inline: auto; }
.js-open-modal:focus-visible, .p-speaker__next:focus-visible, .p-speaker__prev:focus-visible, .js-close-btn:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .p-speaker__next, .p-speaker__prev { width: 40px; height: 40px; }
}

/* 谷本氏の書き出し画像は右側のはみ出し分をカード枠内に収める。 */
.p-speaker__card[data-target="#modal-tanimoto"] {
  aspect-ratio: 288 / 400;
  object-fit: cover;
  object-position: left center;
}

/* 他セクションと同じコンテンツ幅に収める。 */
.p-speaker { padding-inline: 40px; }
.p-speaker__prev { left: 0; right: auto; }
.p-speaker__prev img { transform: rotate(180deg); }
.p-speaker__next:disabled,
.p-speaker__prev:disabled,
.p-speaker__next.swiper-button-lock,
.p-speaker__prev.swiper-button-lock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* 続きがある側だけ、カードの端を透過させる。 */
.p-speaker .speaker-swiper {
  overflow: hidden;
  --speaker-fade-left: 8%;
  --speaker-fade-right: 8%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--speaker-fade-left), #000 calc(100% - var(--speaker-fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--speaker-fade-left), #000 calc(100% - var(--speaker-fade-right)), transparent);
}
.p-speaker .speaker-swiper.is-start { --speaker-fade-left: 0%; }
.p-speaker .speaker-swiper.is-end { --speaker-fade-right: 0%; }
@media (max-width: 900px) {
  .p-speaker { padding-inline: 20px; }
}