/* ==========================================================
   スタッフ詳細ページ
   ========================================================== */

.p-staff-detail {
  position: relative;
  padding: 60rem 0 120rem;
  background-color: #fff;
  /* overflow: clip でテクスチャのはみ出しは隠しつつ、スクロールコンテナ化を防ぐ
     （hidden だとアンカー移動時にこの要素内部がスクロールし、上部が戻せなくなる） */
  overflow: clip;
}

/* 下層共通テクスチャ（右上）のみ非表示 — このページは sumi6 等を使用 */
.p-staff-detail .p-subpage-texture--top {
  display: none !important;
}

/* SVGフィルター */
.p-staff-detail__svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* テクスチャ（PCのみ） */
.p-staff-detail__texture {
  display: none;
}

.p-staff-detail__texture--top {
  top: -80rem;
  left: 0;
  width: 100%;
  height: auto;
}

.p-staff-detail__between {
  display: none;
}

@media (min-width: 769px) {
  .p-staff-detail__texture {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 0;
    max-width: none;
    height: auto;
  }

  .p-staff-detail__between {
    display: block;
    position: relative;
    z-index: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
  }

  .p-staff-detail__texture--between {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    transform: translate(-50%, -50%);
  }

  /* スタッフ1〜2の間 */
  .p-staff-detail__between--1 .p-staff-detail__texture--between {
    width: 120%;
  }

  /* スタッフ2〜3の間（sumi8.png） */
  .p-staff-detail__between--2 .p-staff-detail__texture--between {
    width: 100%;
    transform: translate(-50%, -50%);
  }

  .p-staff-detail__main,
  .p-staff-detail__body {
    position: relative;
    z-index: 1;
  }
}

/* パンくず */
.p-staff-detail__breadcrumb {
  position: relative;
  z-index: 1;
  padding: 0 80rem;
  margin-bottom: 60rem;
  font-size: var(--fs-13);
  letter-spacing: 0.15em;
  color: #333;
}

.p-staff-detail__breadcrumb a {
  transition: opacity 0.3s ease;
}

.p-staff-detail__breadcrumb a:hover {
  opacity: 0.6;
}

/* 見出し（PC）：スタッフ一覧と統一のライン演出 */
.p-staff-detail__heading {
  position: relative;
  z-index: 1;
  padding-left: 120rem;
  margin-bottom: 55rem;
  font-family: var(--font-bask-old);
  font-size: var(--fs-24);
  font-weight: 100;
  letter-spacing: 0.3em;
  color: #333;
}

.p-staff-detail__heading::after {
  content: "";
  display: block;
  width: 50%;
  height: 1rem;
  margin-top: 10rem;
  background-color: #333;
  transform: scaleX(var(--line-scale, 1));
  transform-origin: left center;
}

/* SP見出し（一覧の会社概要／他ページ見出し型：PCでは非表示） */
.p-staff-detail__heading-sp {
  display: none;
}

@media (min-width: 769px) {
  /* 詳細内の .p-staff__grid は枠のみ（2カラムグリッドにしない） */
  .p-staff-detail__grid-all.p-staff__grid {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-template-columns: unset;
  }
}

/* 各スタッフブロック */
.p-staff-detail__staff-block {
  position: relative;
  z-index: 1;
  margin-bottom: 80rem;
  padding: 60rem 0;
  scroll-margin-top: 40rem;
}

.p-staff-detail__staff-block:last-child {
  margin-bottom: 0;
}

/* スタッフ間テクスチャ分の余白（PC） */
@media (min-width: 769px) {
  .p-staff-detail__between + .p-staff-detail__staff-block {
    margin-top: 200rem;
  }

  .p-staff-detail__staff-block + .p-staff-detail__between {
    margin-top: 120rem;
  }
}

/* ----------------------------------------------------------
   メインエリア（写真 + 情報：キャッチは横組／本文ブロックは別途縦書き）
   ---------------------------------------------------------- */
.p-staff-detail__main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20rem;
  padding: 0 160rem;
  margin-bottom: 40rem;
}

/* 写真 */
.p-staff-detail__photo {
  flex-shrink: 0;
  width: 660rem;
  overflow: hidden;
}

.p-staff-detail__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 情報（バッジ + 名前 + キャッチ横組 + 経歴） */
.p-staff-detail__info {
  flex: 1 1 auto;
  min-width: 260rem;
  max-width: 560rem;
  padding-top: 10rem;
}

/* バッジ */
.p-staff-detail__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 10rem;
  background-color: #fff;
  box-shadow: 4rem 8rem 20rem rgba(0, 0, 0, 0.15);
  width: 70rem;
  aspect-ratio: 1 / 1;
  margin-bottom: 100rem;
}

.p-staff-detail__badge-label {
  font-family: var(--font-bask-old);
  font-size: var(--fs-10);
  letter-spacing: 0.2em;
  color: #888;
  line-height: 1;
}

.p-staff-detail__badge-num {
  font-size: var(--fs-30);
  font-weight: 400;
  color: #333;
  line-height: 1;
}

.p-staff-detail__name-ja {
  font-size: var(--fs-32);
  font-weight: 700;
  color: #333;
  letter-spacing: 0.05em;
  margin-bottom: 6rem;
  white-space: nowrap;
}

.p-staff-detail__name-en {
  font-size: var(--fs-14);
  color: #000;
  letter-spacing: 0.12em;
  margin-bottom: 16rem;
}

/* 名前直下・横組みのキャッチ */
.p-staff-detail__catch-wrap {
  margin-bottom: 28rem;
}

.p-staff-detail__catch {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: 1.8;
  color: #333;
  letter-spacing: 0.06em;
  margin: 0 0 8rem;
}

.p-staff-detail__catch:last-child {
  margin-bottom: 0;
}

/* 経歴：改行ごとに 1 行（一列表記） */
.p-staff-detail__career {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.85;
  color: #555;
}

.p-staff-detail__career li {
  display: block;
}

.p-staff-detail__career li:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   本文
   ---------------------------------------------------------- */
.p-staff-detail__body {
  position: relative;
  z-index: 1;
  padding: 60rem 160rem 0;
  /* 欧文フォント（Baskerville）だと縦書きの 1 など細い数字が左に寄って見えるため日本語系に統一 */
  font-family: "Klee One", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: var(--fs-18);
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #333;
  writing-mode: vertical-rl;
  /* 英数字も縦向きのまま1文字ずつ並べる（mixed だと横倒しになる） */
  text-orientation: upright;
  -webkit-text-orientation: upright;
  white-space: pre-wrap;
  margin: 0 auto;
}

/* ==========================================================
   スタッフ詳細 SP（スタッフ一覧と同じ .p-staff__stack）
   ========================================================== */
@media (max-width: 768px) {
  .p-staff-detail {
    padding: 60rem 0 80rem;
  }

  .p-staff-detail__heading {
    display: none;
  }

  .p-staff-detail__heading-sp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10rem;
    padding: 0 30rem;
    margin-bottom: 48rem;
    position: relative;
    z-index: 1;
    justify-content: flex-end;
  }

  .p-staff-detail__heading-sp-line {
    display: block;
    flex-shrink: 0;
    width: 32rem;
    height: 1rem;
    background-color: #333;
  }

  .p-staff-detail__heading-sp-title {
    font-family: var(--font-bask-old);
    font-size: var(--fs-18);
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1.35;
    color: #333;
  }

  .p-staff-detail__breadcrumb {
    display: none;
  }

  /* 一覧のグリッドを staff.css で .p-staff にスコープしたため、詳細の縦並びはここで指定 */
  .p-staff-detail__grid-all.p-staff__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 30rem;
  }

  .p-staff-detail__staff-block {
    margin-bottom: 0;
    padding: 0;
  }

  .p-staff-detail__staff-block:last-child {
    margin-bottom: 0;
  }

  /* 2・3番目のスタッフのみ上にアキ */
  .p-staff-detail__grid-all.p-staff__grid > .p-staff__item:nth-child(2),
  .p-staff-detail__grid-all.p-staff__grid > .p-staff__item:nth-child(3) {
    padding-top: 100rem;
  }

  .p-staff-detail__pc {
    display: none !important;
  }

  .p-staff-detail__texture--top {
    top: -300rem;
    left: -100rem;
    right: auto;
    width: 900rem;
  }
}