/* staff-carousel.css — STAFF 横スライド + ホバーで紹介文(js/staff-carousel.js が組み立て) */
.sc-staff { position: relative;
  --sc-pad: 14px;    /* .sc-card 左右padding = カード端から枠線(.sc-inner border)までの距離 */
  --sc-line: 1px;    /* .sc-inner の枠線の太さ */
  --sc-arrow: 44px;  /* 矢印ボタンの直径 */
}
.sc-viewport { overflow: hidden; }
.sc-track { display: flex; transition: transform .45s ease; }
.sc-card {
  flex: 0 0 calc(100% / var(--pv, 3)); box-sizing: border-box; padding: 0 var(--sc-pad); position: relative;
}
/* 設計(STAFF横スライド実測 card368x391): 中身は中央揃え。写真は余白付きで中央、
   氏名は大きく(細字)＋読みを下に小さく、短い罫線を挟んで役職(小)、出身地ピルを中央に */
.sc-inner { border: var(--sc-line) solid var(--line); padding: 30px 24px 34px; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 画像枠は全カード常に1:1の正方形。非正方形画像は短辺を枠幅に合わせ長辺は中央でcover=歪めず切取り */
.sc-card img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; margin-bottom: 26px; }
/* 直下要素(sc-name / hyphen / sc-role)を各々1まとまりとして上下中央揃え(sc-name内部の縦積みは不変) */
.sc-name-row { display: flex; align-items: center; justify-content: center; gap: 11px; }
.sc-name { display: flex; flex-direction: column; align-items: center; flex: none; }
.sc-name b { font-size: 1.5rem; font-weight: 400; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.sc-name .jp { font-size: .7rem; color: var(--muted); margin-top: 1.5px; letter-spacing: .08em; }
.sc-name-row .hyphen { width: 26px; height: 1px; background: var(--ink); flex: none; }
.sc-role { font-size: 1.425rem; color: var(--ink); margin-top: 0; }   /* 役職: 従来.95remの1.5倍。氏名と行頭を揃える */
.sc-origin { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; min-height: 24px; }
.sc-origin .origin { background: var(--line); color: #fff; font-size: .72rem; padding: 4px 12px; border-radius: 4px; letter-spacing: .06em; }
.sc-origin .country { font-size: .9rem; }

/* ホバー(またはタップ)で紹介文を重ねる */
.sc-bio {
  position: absolute; inset: 0 14px; background: rgba(255, 255, 255, .93);
  padding: 28px; display: flex; align-items: center; font-size: .82rem; line-height: 1.9;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.sc-card.is-open .sc-bio { opacity: 1; visibility: visible; }
/* ホバーは hover 可能な端末(PC)のみ。SP(タッチ)は MESSAGE ボタンの is-open だけで開閉 */
@media (hover: hover) { .sc-card:hover .sc-bio { opacity: 1; visibility: visible; } }

/* 矢印・ドット */
.sc-prev, .sc-next {
  position: absolute; top: 50%; transform: translateY(-50%); width: var(--sc-arrow); height: var(--sc-arrow); border: 1px solid var(--line);
  border-radius: 50%; background: #fff; cursor: pointer; color: var(--ink); z-index: 2;
  /* 中身(SVGシェブロン)を flex で上下左右中央に。padding:0 でボタン既定の内側余白を消す */
  display: flex; align-items: center; justify-content: center; padding: 0;
}
/* SVGはink外接矩形=viewBox中央で設計済み → ボックスを中央化すれば見た目も厳密中央。線色はcurrentColor継承 */
.sc-prev svg, .sc-next svg { display: block; width: 42%; height: 42%; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ボタン中心を枠線ラインの中心に合わせる: 枠線中心はカード端から (--sc-pad + --sc-line/2)。
   そこへボタン中心を置くには、その位置から半径 (--sc-arrow/2) 戻した所を left/right にする */
.sc-prev { left: calc(var(--sc-pad) + var(--sc-line) / 2 - var(--sc-arrow) / 2); }
.sc-next { right: calc(var(--sc-pad) + var(--sc-line) / 2 - var(--sc-arrow) / 2); }
.sc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.sc-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #aaa; background: none; cursor: pointer; padding: 0; }
.sc-dot.is-active { background: #999; }

/* MESSAGE ボタン: PC はホバーで紹介文が出るので隠す。SP で表示しタップで開く(カードの toggle を流用) */
.sc-msg { display: none; }

@media (max-width: 768px) {
  /* SP も pv=1 でカードpaddingは同じ → 位置は共通calc(枠線=--sc-pad)を継承。左右の個別指定は不要 */
  /* SP: MESSAGE は設計どおり枠線付きボックス(142x34・VOICEのREAD MOREと同スタイル) */
  .sc-msg { display: inline-block; background: none; border: 1px solid var(--line); padding: 9px 26px; margin-top: 18px;
    color: var(--line); letter-spacing: .12em; font-size: .78rem; cursor: pointer; }
}