/* ============================================================
   STAFF / 社員紹介
   ============================================================ */
.staff-mv__placeholder { background-image: none; background-color: #dfe7df; }
.staff-section { padding: clamp(72px, 8vw, 112px) 0 clamp(90px, 10vw, 140px); background: #fff; }
.staff-heading { text-align: center; }
.staff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); max-width: 1120px; margin: 0 auto; }
.staff-card { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.staff-card__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eef2ed; }
.staff-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, opacity .35s ease; }
.staff-card__noimage { display: grid; place-items: center; width: 100%; height: 100%; color: #9ba69b; font-family: var(--font-en); font-size: 12px; letter-spacing: .15em; }
.staff-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 28px); background: rgba(31, 105, 74, .7); color: #fff; opacity: 0; transition: opacity .3s ease; }
.staff-card__department { margin-bottom: 8px; font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
.staff-card__name { font-size: clamp(20px, 1.8vw, 27px); font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.staff-card__more { margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); font-family: var(--font-en); font-size: 10px; letter-spacing: .18em; }

.staff-card__meta { display: block; padding: 14px 2px 0; }
.staff-card__meta-department { display: block; min-height: 1.6em; color: var(--green-700); font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .05em; }
.staff-card__meta-name { display: block; margin-top: 4px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: .06em; }
@media (hover:hover) {
  .staff-card:hover .staff-card__overlay, .staff-card:focus-visible .staff-card__overlay { opacity: 1; }
  .staff-card:hover .staff-card__photo img { transform: scale(1.025); opacity: 1; }
}
.staff-card:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }
.staff-empty { text-align: center; color: var(--gray); }

body.staff-modal-open { overflow: hidden; }
.staff-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 36px 84px; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.staff-modal.is-open { visibility: visible; opacity: 1; }
.staff-modal__backdrop { position: absolute; inset: 0; background: rgba(15,25,18,.72); }
.staff-modal__dialog { position: relative; z-index: 1; width: min(100%, 1000px); max-height: min(760px, calc(100vh - 72px)); background: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.2); }
.staff-modal__content { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); max-height: inherit; overflow: auto; }
.staff-modal__photo { min-height: 540px; background: #e8ede7; }
.staff-modal__photo img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; display: block; }
.staff-modal__noimage { display: grid; place-items: center; height: 100%; min-height: 540px; color: #9ba69b; }
.staff-modal__body { padding: clamp(42px, 5vw, 70px) clamp(36px, 5vw, 68px); }
.staff-modal__department { color: var(--green-700); font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.7; }
.staff-modal__name { margin-top: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--green-500); font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: .08em; }
.staff-modal__questions { margin-top: 34px; display: grid; gap: 25px; }
.staff-modal__q { color: var(--green-700); font-size: 16px; font-weight: 600; line-height: 1.6; }
.staff-modal__a { margin-top: 7px; color: var(--ink); font-size: 14px; line-height: 1.85; white-space: pre-line; }
.staff-modal__close { position: absolute; z-index: 4; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; background: #fff; cursor: pointer; }
.staff-modal__close span { position: absolute; left: 10px; top: 20px; width: 22px; height: 1px; background: var(--green-900); }
.staff-modal__close span:first-child { transform: rotate(45deg); }.staff-modal__close span:last-child { transform: rotate(-45deg); }
.staff-modal__nav { position: absolute; z-index: 3; top: 50%; width: 54px; height: 74px; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; }
.staff-modal__nav--prev { left: -70px; }.staff-modal__nav--next { right: -70px; }
.staff-modal__nav span { display: block; width: 28px; height: 28px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.staff-modal__nav--prev span { transform: rotate(-45deg); }.staff-modal__nav--next span { transform: rotate(135deg); }

@media (max-width: 1024px) {
  .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; }
  .staff-modal { padding-inline: 68px; }
  .staff-modal__content { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); }
  .staff-modal__photo, .staff-modal__photo img, .staff-modal__noimage { min-height: 540px; }
  .staff-modal__nav--prev { left: -58px; }.staff-modal__nav--next { right: -58px; }
}
@media (max-width: 767px) {
  .staff-section { padding-top: 60px; }
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .staff-card__overlay { padding: 14px; opacity: 0; }
  .staff-card__department { font-size: 10px; margin-bottom: 5px; }
  .staff-card__name { font-size: 17px; }
  .staff-card__more { margin-top: 12px; font-size: 8px; }
  .staff-card__meta { padding: 9px 1px 0; }
  .staff-card__meta-department { min-height: 0; font-size: 9px; line-height: 1.5; letter-spacing: .02em; }
  .staff-card__meta-name { margin-top: 3px; font-size: 14px; line-height: 1.4; letter-spacing: .03em; }
  .staff-modal { padding: 18px 14px; align-items: center; }
  .staff-modal__dialog { width: 100%; max-height: calc(100vh - 36px); }
  .staff-modal__content { display: block; max-height: calc(100vh - 36px); overflow-y: auto; }
  .staff-modal__photo { min-height: 0; height: min(52vh, 410px); }
  .staff-modal__photo img { min-height: 0; height: 100%; }
  .staff-modal__noimage { min-height: 280px; }
  .staff-modal__body { padding: 30px 24px 42px; }
  .staff-modal__name { font-size: 27px; }
  .staff-modal__questions { margin-top: 26px; gap: 21px; }
  .staff-modal__close { position: fixed; top: 25px; right: 22px; }
  .staff-modal__nav { position: fixed; top: 50%; width: 38px; height: 64px; }
  .staff-modal__nav--prev { left: 2px; }.staff-modal__nav--next { right: 2px; }
  .staff-modal__nav span { width: 18px; height: 18px; }
}