/* =========================================================
   院長・スタッフ紹介ページ (slug: staff)
   デザインカンプ XoXUw4vzh2C2X6RIfJJVGM node 560:6626 (2_staff)
   top.css の :root 変数・.page-* / .cta-band 前提（pages.css の後に読み込む）
   ========================================================= */

.stf-page { background: #fff; padding-bottom: 147px; }
.stf-page * { box-sizing: border-box; }

/* ---------- ヒーロー（集合写真 + コーラルグラデ + Staff 見出し） ---------- */
.stf-hero {
  position: relative;
  width: 100%;
  height: 657px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.stf-hero__bg { position: absolute; inset: 0; z-index: -2; }
.stf-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; display: block; }
@media (min-width: 1600px) {
  .stf-hero__bg img { object-position: center 34%; }
}
.stf-hero__overlay {
  /* 透明 → コーラルの縦グラデ（赤の面積を抑える） */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(229,177,177,0) 66%, rgba(252,146,145,.82) 100%);
}
.stf-hero__inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* タイトルはビューポート左端基準に固定（1920等の広幅でも左下に来る） */
  padding: 0 44px 40px;
}
.stf-hero__crumb {
  margin: 0 0 8px;
  font-family: var(--ff-noto, inherit);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
}
.stf-hero__en {
  margin: 0;
  font-family: var(--ff-josefin);
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 1.5px;
}

/* ---------- 本文（中央寄せ 1024px・内側 600px カラム） ---------- */
.stf-body {
  max-width: 1024px;
  margin: 0 auto;
  padding: 96px 24px 0;
}
.stf-body > * { max-width: 600px; margin-left: auto; margin-right: auto; }

/* 院長 小ポートレート + 氏名 */
.stf-director { text-align: center; min-height: 512px; }
.stf-director__head {
  width: 600px;
  margin: 0 auto 28px;
  text-align: left;
}
.stf-director__photo {
  width: 286px;
  aspect-ratio: 286 / 380;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
}
.stf-director__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 39%; transform: scale(1.25); display: block; }
.stf-director__role {
  margin: 0;
  font-family: var(--ff-josefin);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--c-pink);
}
.stf-director__name {
  margin: 4px 0 0;
  color: var(--c-brown);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.7;
  letter-spacing: 3.2px;
  white-space: nowrap;
  word-break: keep-all;
}

/* 見出しブロック（経歴・保有資格・所属学会・メッセージ）: 赤い縦バー + 本文 */
.stf-block { margin-top: 60px; }
.stf-director + .stf-block { margin-top: 64px; }
.stf-block__title {
  position: relative;
  margin: 0 0 24px;
  padding-left: 25px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 3.2px;
  color: #3b3b3b;
  min-height: 54px;
}
.stf-block__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: 1.7em;
  background: var(--c-red);
}
.stf-block__list { list-style: none; margin: 0; padding: 0; }
.stf-block__list li {
  position: relative;
  padding-left: 20px;
  color: var(--c-brown2);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 1.92px;
}
.stf-block__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-brown2);
}
.stf-block__message p {
  margin: 0;
  color: var(--c-brown2);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 1.92px;
}
.stf-block__message p:last-child { text-align: right; }

/* 認定証 2枚（縦積み, 600x398, radius 8） */
.stf-certs {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}
.stf-cert {
  margin: 0;
  width: 100%;
  aspect-ratio: 600 / 398;
  border-radius: 8px;
  overflow: hidden;
  background: #f1efe9;
}
.stf-cert img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stf-body + .cta-band { margin-top: 120px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 820px) {
  .stf-page { padding-bottom: 120px; }
  .stf-hero { height: 380px; }
  .stf-hero__inner { padding: 0 20px 28px; }
  .stf-hero__en { font-size: 38px; }

  .stf-body { padding: 64px 18px 0; }
  .stf-director__head { width: 100%; }
  .stf-director__name { font-size: 26px; letter-spacing: 2px; }
  .stf-block { margin-top: 44px; }
  .stf-block__title { font-size: 18px; letter-spacing: 2px; }
  .stf-block__list li { font-size: 15px; letter-spacing: 1px; }
  .stf-block__message p { font-size: 15px; letter-spacing: 1px; }
  .stf-certs { gap: 32px; margin-top: 44px; }
  .stf-body + .cta-band { margin-top: 72px; }
}

@media (max-width: 480px) {
  .stf-director__photo { width: 220px; }
  .stf-director__name { font-size: 22px; }
}

/* SPレビュー反映: 初期表示は写真全面 + 左下パンくず/ページ名。 */
@media (max-width: 820px) {
  .stf-hero {
    height: min(calc(100vh - 60px), 760px) !important;
    height: min(calc(100svh - 60px), 760px) !important;
  }

  .stf-hero__overlay {
    background: linear-gradient(to bottom, rgba(229,177,177,0) 42%, rgba(252,146,145,.36) 76%, rgba(252,146,145,.72) 100%) !important;
  }

  .stf-hero__inner {
    padding: 0 24px 46px !important;
  }

  .stf-director {
    min-height: 0 !important;
  }

  .stf-director + .stf-block {
    margin-top: 34px !important;
  }
}