/* スタッフ紹介カード・インタビューモーダル（トップ／採用ページ共通。js/pages/staff-ui.js が生成） */
.staff-list { display: grid; gap: clamp(20px, 3vw, 36px); justify-content: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 420px)); }
.staff-card {
  display: grid; grid-template-columns: minmax(130px, 42%) 1fr; gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.staff-card__photo { position: relative; background: var(--surface); }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.staff-card__num { position: absolute; left: 10px; top: 10px; font-weight: 700; font-size: 13px; letter-spacing: .1em; padding: 2px 10px; border-radius: 999px; background: rgba(22, 34, 47, .82); color: #fff; }
.staff-card__body { padding: 22px 22px 22px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.staff-card__dept { font-size: 13px; font-weight: 700; color: var(--red-dark); letter-spacing: .04em; line-height: 1.5; }
.staff-card__name { font-size: 20px; line-height: 1.4; }
.staff-card__name small { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.staff-card__entry { font-size: 13px; color: var(--muted); }
.staff-card__quote { font-size: 14.5px; line-height: 1.8; color: var(--text); margin: 8px 0 12px; padding: 10px 14px; background: var(--surface); border-radius: 10px; }
.staff-card__btn { align-self: flex-start; }
.staff-card__btn::before { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.staff-card__btn:focus-visible { outline-offset: 2px; }
@media (max-width: 560px) {
  .staff-card { grid-template-columns: 1fr; }
  .staff-card__photo img { aspect-ratio: 4 / 3; object-position: center 20%; }
  .staff-card__body { padding: 20px 20px 22px; }
  .staff-card__btn { width: 100%; }
}

/* 採用ページ（暗い背景）用 */
.section--dark .staff-card, .staff-list--recruit .staff-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #e9eef3; }
.section--dark .staff-card__name, .staff-list--recruit .staff-card__name { color: #fff; }
.section--dark .staff-card__dept, .staff-list--recruit .staff-card__dept { color: #ff9db3; }
.section--dark .staff-card__entry, .section--dark .staff-card__name small, .staff-list--recruit .staff-card__entry, .staff-list--recruit .staff-card__name small { color: #c4ced8; }
.section--dark .staff-card__quote, .staff-list--recruit .staff-card__quote { color: #eef2f6; background: rgba(255, 255, 255, .08); }
.section--dark .staff-card__photo, .staff-list--recruit .staff-card__photo { background: rgba(255, 255, 255, .08); }
.section--dark .staff-card__btn:focus-visible { outline-color: #fff; }

/* モーダル */
.staff-modal__head { display: flex; align-items: center; gap: 20px; }
.staff-modal__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .5); flex: none; background: #fff; }
.staff-modal__head .modal__meta { margin-bottom: 4px; font-size: 13px; }
.staff-modal__job { color: rgba(255, 255, 255, .85); margin-top: 6px; line-height: 1.6; }
.staff-modal__section + .staff-modal__section { margin-top: 32px; }
.staff-modal__section > h3 { font-size: 16px; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 2px solid var(--red); display: inline-block; }
.qa + .qa { margin-top: 22px; }
.qa__q { font-size: 15px; line-height: 1.6; color: var(--red-dark); padding-left: 1.6em; text-indent: -1.6em; }
.qa__q::before { content: "Q."; display: inline-block; width: 1.6em; text-indent: 0; font-weight: 700; }
.qa__a { margin-top: 6px; line-height: 2; }
.staff-message { margin-top: 32px; padding: 22px 24px; background: var(--red-soft); border-radius: var(--radius); }
.staff-message h3 { font-size: 15px; color: var(--red-dark); margin-bottom: 8px; }
.staff-message p { line-height: 2; }
@media (max-width: 560px) {
  .staff-modal__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .staff-modal__photo { width: 76px; height: 76px; }
}