/* メンバー自己紹介動画（写真・ボタンから開くモーダル再生） */
.member-play {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer
}
.member-play:after {
  content:'';
  position:absolute;
  right:6%;
  bottom:6%;
  width:18%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat;
  box-shadow:0 2px 10px #0004;
  transition:transform .2s
}
.member-play:hover:after,.member-play:focus-visible:after {
  transform:scale(1.12)
}
.movie-status.movie-button {
  border:0;
  font-family:inherit;
  cursor:pointer;
  gap:.4em;
  transition:opacity .2s
}
.movie-button:hover {
  opacity:.85
}
.movie-button:before {
  content:'▶';
  font-size:.8em
}

/* モーダルは画面全体に広げ、動画だけを上下左右中央に置く。ボタン類は端に重ねる。 */
.movie-modal {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  overflow:hidden
}
.movie-modal[open] {
  display:flex;
  align-items:center;
  justify-content:center
}
.movie-modal::backdrop {
  background:#000d
}
.movie-modal-head {
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:12px 16px;
  pointer-events:none
}
.movie-modal-head > * {
  pointer-events:auto
}
.movie-modal-title {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin:10px 0 0;
  text-align:center;
  font-size:clamp(16px,1.6vw,24px);
  font-weight:700;
  letter-spacing:.08em
}
.movie-modal-close {
  flex:none;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#151515;
  font-size:26px;
  line-height:1;
  cursor:pointer
}
/* 動画と名前・前後ボタンをまとめた枠。名前は動画の真下に重ね、動画の中央位置は動かさない。 */
.movie-modal-body {
  position:relative
}
.movie-modal video {
  display:block;
  height:calc(100dvh - 140px);
  max-height:1280px;
  aspect-ratio:9/16;
  width:auto;
  background:#000
}
.movie-modal-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:#fff3;
  color:#fff;
  font-size:22px;
  cursor:pointer
}
.movie-modal-nav[data-dir="-1"] {
  right:calc(100% + 24px)
}
.movie-modal-nav[data-dir="1"] {
  left:calc(100% + 24px)
}
.movie-modal-nav:hover {
  background:#fff5
}
@media(max-width:640px) {
  .movie-modal video {
    height:auto;
    width:min(100vw - 24px,(100dvh - 140px) * 9 / 16)
  }
  .movie-modal-nav {
    width:40px;
    height:40px;
    background:#0006
  }
  .movie-modal-nav[data-dir="-1"] {
    right:auto;
    left:8px
  }
  .movie-modal-nav[data-dir="1"] {
    left:auto;
    right:8px
  }
}