/* ============================================================
   スタッフ紹介（/スタッフ紹介/）— ページ専用CSS
   共通部分（配色・ナビ・見出し・ボタン・カード）は shinkan-common.css
   パートごとの色は旧ページの5パート図に合わせている（文字色のみに使う）
   ============================================================ */

.st-c-mgr { --st-color: #9A7400; }
.st-c-tr  { --st-color: #A8467F; }
.st-c-mkg { --st-color: #4F7A10; }
.st-c-sa  { --st-color: #C2384F; }
.st-c-se  { --st-color: #0079AD; }

/* ----- HERO ----- */
.st-hero-kicker {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  color: var(--sk-blue);
  border: 2px solid var(--sk-blue);
  border-radius: 999px;
  padding: 2px 18px;
  margin-bottom: 14px;
}
.sk-hero-lead p + p { margin-top: 1em; }

/* ----- MOVIE ----- */
.st-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sk-radius);
  overflow: hidden;
  background: #000000;
}
.st-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----- 5つのパート ----- */
.st-parts-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 24px; }
.st-parts-nav a { display: flex; flex-direction: column; height: 100%; }
.st-parts-nav a:hover .st-ja { text-decoration: underline; }
.st-parts-nav b {
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--st-color);
}
.st-parts-nav .st-en { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--st-color); margin-top: 6px; line-height: 1.4; }
.st-parts-nav .st-ja { font-weight: 900; margin-top: 4px; line-height: 1.4; }
.st-parts-nav small { font-size: 13px; color: var(--sk-sub); margin-top: 6px; line-height: 1.5; }
@media (max-width: 960px) { .st-parts-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .st-parts-nav { grid-template-columns: 1fr; gap: 16px; }
  .st-parts-nav a {
    display: grid;
    grid-template-columns: 4.2em 1fr;
    column-gap: 12px;
    align-items: center;
  }
  .st-parts-nav b { grid-row: span 3; font-size: 32px; }
  .st-parts-nav .st-en, .st-parts-nav .st-ja, .st-parts-nav small { margin-top: 0; }
}
@media (max-width: 360px) {
  .st-parts-nav .st-ja { font-size: 15px; }
}

/* ----- 各パート ----- */
.st-part-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}
.st-part-text > p + p { margin-top: 1em; }
.st-part-text strong { color: var(--st-color); }
.st-part-abbr {
  display: block;
  font-size: 52px;
  line-height: 1;
  color: var(--st-color);
}
.st-part-name { font-size: clamp(24px, 4vw, 32px); font-weight: 900; line-height: 1.4; }
.st-part-name .st-part-abbr { margin-bottom: 6px; font-weight: 900; }
.st-part-catch {
  display: inline-block;
  font-weight: 900;
  color: #FFFFFF;
  background: var(--st-color);
  border-radius: 6px;
  padding: 2px 12px;
  margin: 10px 0 20px;
}
.st-part-text > .st-part-catch + p { margin-top: 0; }
.st-part-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto !important;
  border-radius: var(--sk-radius);
  position: sticky;
  top: 24px;
}
@media (max-width: 860px) {
  .st-part-head { grid-template-columns: 1fr; gap: 24px; }
  .st-part-img { order: -1; position: static; aspect-ratio: 16 / 10; }
}

.st-work-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 900;
  margin: 48px 0 18px;
}
.st-work-title::after { content: ""; flex: 1; height: 2px; background: var(--st-color); opacity: 0.35; }
.st-works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.st-works--3 { grid-template-columns: repeat(3, 1fr); }
.st-works h4 { font-size: 17px; font-weight: 900; color: var(--st-color); margin-bottom: 6px; }
.st-works p { font-size: 15px; }
@media (max-width: 860px) { .st-works, .st-works--3 { grid-template-columns: 1fr; } }