/* =========================================================
   スタッフ（/staff）  Studio の実測値（tree_staff_pc / sp）で再現
   ========================================================= */
.staff-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 上の写真 ---------- */
.staff-hero { display: flex; justify-content: flex-end; align-items: center; height: 477px; padding-left: var(--side); }
.staff-hero__img { width: 100%; height: 100%; background-color: var(--gray-bg); background-repeat: no-repeat; background-position: center center; background-size: 1387px; }

/* ---------- スタッフ ---------- */
.staff-list { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 90px 0 90px var(--side); }
.staff-list__ul { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; width: 100%; margin: 0 0 20px; list-style: none; }
.staff-card { display: flex; justify-content: center; align-items: center; gap: 20px; width: 950px; max-width: 100%; height: 390px; padding: 20px; border: 5px double var(--beige); color: var(--navy); }
.staff-card__photo { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 30%; max-width: calc(30% - 14px); height: 100%; }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__body { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; max-width: calc(70% - 6px); height: 100%; }
.staff-card__head { display: flex; justify-content: center; align-items: center; margin: 0 0 30px; }
.staff-card__name { padding: 0 20px 0 0; border-right: 1px solid var(--navy); font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .1em; text-align: center; }
.staff-card__role { padding: 0 0 0 20px; font-size: 20px; line-height: 1; letter-spacing: .1em; text-align: center; }
.staff-card__lead,
.staff-card__text { font-size: 16px; line-height: 1.8; text-align: left; }

/* ---------- 求人の帯 ---------- */
.staff-recruit { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: var(--side); }
.staff-recruit__link { display: block; width: 809px; max-width: 100%; height: 250px; transition: opacity .3s; }
.staff-recruit__link img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .staff-recruit__link:hover { opacity: .8; } }

/* ---------- 1140px 以下 ---------- */
@media (max-width: 1140px) {
	.staff-list { padding: 50px 20px 50px 200px; }
}

/* ---------- 990px 以下（左メニューが上の帯に） ---------- */
@media (max-width: 990px) {
	.staff-list { gap: 50px; padding: 50px 20px; }
	.staff-card { padding: 20px 10px; }
	.staff-recruit { padding: 0 20px; }
}

/* ---------- 690px 以下（スマホ） ---------- */
@media (max-width: 690px) {
	.staff-hero { padding-left: 0; }
	.staff-hero__img { background-position: left center; }
	.staff-card { flex-direction: column; gap: 20px; width: 100%; height: auto; }
	.staff-card__photo { width: 179.4px; max-width: 100%; height: 208px; }
	.staff-card__body { width: auto; max-width: 100%; height: auto; }
	.staff-card__head { flex-direction: column; margin: 0 0 20px; }
	.staff-card__name { padding: 0; border-right: 0; font-size: 20px; }
	.staff-card__role { padding: 10px 0 0; font-size: 15px; }
	.staff-card__role--fix { height: 15px; }
	.staff-recruit__link { height: 135px; }
}

/* ---------- 360px 以下 ---------- */
@media (max-width: 360px) {
	.staff-card__photo { width: 100%; }
}