/* =========================================================
   社員を知る — people.css（lower.css の後に読む。/people/・/people/{slug}/・/people/crosstalk/ の3つで共用）
   /people/：01 絞り込みのチップ（.pfilter）／02 座談会の入口（.ctcard）／03 社員の数字（.pstats）
   インタビュー：01 プロフィール（.profile）／02 Q&A（.ivqa）／03 1日の流れ（.ivday）／04 吹き出しのメッセージ（.ivmsg）／05 職種とほかの社員（.ivmore）
   座談会：01 参加者（.member）とテーマの目次（.cttoc）／02〜06 発言（.talk）と発言者の丸（.cast。見せ場・crosstalk.js）／写真（.ctphoto）
   色・角丸・余白は tokens.css の変数だけ。札（後ろにずらした淡い面）は使わず、文字や写真に図形を重ねない
   ========================================================= */

/* 見出しや短い文は、文節の切れ目で折り返す（社員カードのキャッチ・座談会の入口） */
.pcard__title, .ctcard__text, .member__meta dd { word-break: auto-phrase; }

/* 丸い顔写真（座談会の顔。正面向きではない横顔の写真を丸く切り抜く） */
.member__face img, .talk__face img, .cast__face img, .ctcard__face img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--color-bg-kv);
}

/* =========================================================
   /people/ 01 絞り込み（lower.js の [data-filter]）。JS が無いときはチップを出さず、全員を表示したまま
   ========================================================= */
.pfilter { display: grid; gap: 10px; margin-bottom: 28px; }
.pfilter__label { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.pfilter__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pfilter__chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink);
  font-size: 14px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-ja); cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.pfilter__chip:hover { background: var(--color-layer); }
.pfilter__chip[aria-pressed="true"] { background: var(--color-brand); color: var(--color-on-brand); }
.pfilter__status { font-size: 13px; line-height: 1.7; letter-spacing: var(--ls-ja); color: var(--color-gray); }
@media (scripting: none) { .pfilter { display: none; } }

/* =========================================================
   /people/ 02 座談会の入口：白い面（淡い地の上）に写真と、タイトル・3人の丸い顔
   ========================================================= */
.ctcard__link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 8px; border-radius: var(--radius-tab); background: var(--color-bg);
}
.ctcard__photo { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-kv); }
.ctcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 35%); transition: scale .6s var(--ease-out); }
.ctcard__link:hover .ctcard__photo img { scale: 1.05; }
.ctcard__body { padding: 22px 14px 14px; }
.ctcard__tab {
  display: inline-block; margin-bottom: 12px; padding: 1px 12px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: var(--ls-heading);
}
.ctcard__title { font-size: 22px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); word-break: auto-phrase; }
.ctcard__text { margin-top: 8px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.ctcard__members { margin-top: 18px; border-top: 1px solid var(--color-line); }
.ctcard__member { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-line); }
.ctcard__face { display: block; width: 52px; aspect-ratio: 1; }
.ctcard__who { display: grid; }
.ctcard__name { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .14em; }
.ctcard__meta { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.ctcard__more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px;
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja);
}
.ctcard__more > span:first-child {
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--color-line), var(--color-line));
  background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out);
}
.ctcard__link:hover .ctcard__more > span:first-child { background-size: 100% 1px, 100% 1px; }
.ctcard__more .arw { width: 28px; height: 28px; }
.ctcard__link:hover .arw::before { transform: scale(1); }
.ctcard__link:hover .arw svg { animation: arw-next .4s var(--ease-arrow); }

/* =========================================================
   /people/ 03 社員の数字（.stat。数字で見ると同じ値）
   ========================================================= */
.pstats { margin: 0; padding: 0; list-style: none; }
.pstats .num { font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pstats + .lactions { margin-top: 36px; }

/* =========================================================
   インタビュー 01 プロフィール：左に名前（H2）と読み、右に罫線の表
   ========================================================= */
.profile__head .sec-title { letter-spacing: .16em; }
.profile__table .text-link { margin: -10px 0; } /* 押せる高さ 44px は保ったまま、行の高さをほかの行にそろえる */

/* インタビュー 02 Q&A：問い（オレンジの吹き出しの Q）→ 答え。2問目と4問目のあとに写真 */
.ivqa { row-gap: 56px; }
.ivqa__photo { margin: 0; }
.ivqa__photo .ph-frame { aspect-ratio: 3 / 2; }

/* インタビュー 03 1日の流れ */
.ivday__list .timeline__time { color: var(--color-ink); }

/* インタビュー 04 応募を考える人へ：白い吹き出し（下にしっぽ。しっぽは面の外に出し、文字には重ねない） */
.ivmsg { margin: 0; text-align: center; }
.ivmsg__bubble {
  position: relative; margin: 0;
  padding: 40px 26px 38px; border-radius: var(--radius-l); background: var(--color-bg);
}
.ivmsg__bubble::after {
  content: ""; position: absolute; top: calc(100% - 1px); left: 50%;
  width: 44px; height: 26px; margin-left: -16px;
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}
.ivmsg__text { font-size: 19px; font-weight: var(--fw-bold); line-height: 1.95; letter-spacing: var(--ls-heading); word-break: auto-phrase; }
.ivmsg__sign { display: grid; justify-items: center; gap: 2px; margin-top: 44px; }
.ivmsg__meta { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.ivmsg__name { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .16em; }

/* インタビュー 05 この人の職種（1枚）とほかの社員（2枚） */
.ivmore { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.ivmore__label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.ivmore__label::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.ivmore__jobcards { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.ivmore__jobcards .job-card__link { height: 100%; padding: 8px 8px 24px; border-radius: var(--radius-tab); background: var(--color-tint); } /* 隣の社員カードと同じ面に */
.ivmore__jobcards .job-card__photo { border-radius: var(--radius-m); }
.ivmore__jobcards .job-card__body { padding: 18px 12px 0; }

/* =========================================================
   座談会 01 参加者3名：丸い顔・区分と入社年・名前・職種・前職（中川は役割も）→ 話したテーマの目次
   ========================================================= */
.members { margin: 0; padding: 0; list-style: none; }
.member { padding: 0; }
.member__in { position: relative; display: flex; flex-direction: column; height: 100%; padding: 52px 22px 14px; }
.member__head { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 18px; align-items: center; }
.member__face { display: block; width: 92px; aspect-ratio: 1; }
.member__tag { /* 垂れ下がるタブ（社員カードの「新卒入社／キャリア入社」と同じ形） */
  position: absolute; top: 0; left: 22px;
  padding: 7px 14px 8px; border-radius: 0 0 var(--radius-chip) var(--radius-chip);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: var(--ls-heading); white-space: nowrap;
}
.member__name { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .16em; }
.member__kana { font-size: 12px; line-height: 1.6; letter-spacing: .1em; color: var(--color-ink-sub); }
.member__meta { flex: 1; margin: 18px 0 0; border-top: 1px solid var(--color-line); }
.member__meta > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-line); }
.member__meta dt { font-size: 12px; font-weight: var(--fw-bold); line-height: 2; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.member__meta dd { margin: 0; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.member .text-link { align-self: flex-start; margin-top: 8px; }

.cttoc { display: grid; gap: 14px; margin-top: 48px; }
.cttoc__title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.cttoc__title::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.cttoc__no { margin-right: 10px; color: var(--color-ink-sub); }

/* =========================================================
   座談会 02〜06 テーマ：問い（H2）→ 発言。SP・static・JS なしは、各発言の頭に話した人の小さな丸
   PC（1024px〜）：左に問い（スティッキー）、右に発言。crosstalk.js が .is-live を付けたときだけ、左に3人の丸（.cast）を出し、
   画面の中央にある発言の人の丸を大きく・オレンジの輪に（transform・opacity だけで動かす）
   ========================================================= */
.talk__head { margin-bottom: 32px; }
.talk__list { display: grid; row-gap: 28px; margin: 0; padding: 0; list-style: none; }
.talk__item {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "face who" "text text";
  column-gap: 12px; row-gap: 8px; align-items: center;
}
.talk__face { grid-area: face; display: block; width: 48px; aspect-ratio: 1; }
.talk__who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.talk__name { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .16em; }
.talk__role { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.talk__text { grid-area: text; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 2.05; letter-spacing: var(--ls-ja); }

.cast { display: none; margin: 0; padding: 0; list-style: none; }
.cast__item { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.cast__face {
  position: relative; display: block; width: 88px; aspect-ratio: 1;
  opacity: .45; transform: scale(.72);
  transition: opacity .5s linear, transform .6s var(--ease-out);
}
.cast__face::after { /* オレンジの輪（写真の外側に。写真には重ねない） */
  content: ""; position: absolute; inset: -7px; border: 3px solid var(--color-brand); border-radius: 50%;
  opacity: 0; transform: scale(.9);
  transition: opacity .4s linear, transform .6s var(--ease-out);
}
.cast__name { display: grid; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .16em; opacity: .5; transition: opacity .5s linear; }
.cast__job { font-size: 12px; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.cast__item.is-on .cast__face { opacity: 1; transform: none; }
.cast__item.is-on .cast__face::after { opacity: 1; transform: none; }
.cast__item.is-on .cast__name { opacity: 1; }

/* 画面の高さが低い PC では、左の3人の丸を小さくして、スティッキーの列が画面に収まるように */
@media (min-width: 1024px) and (max-height: 780px) {
  .cast__item { grid-template-columns: 64px minmax(0, 1fr); }
  .cast__face { width: 64px; }
}

/* 座談会の MV：SP・タブレットは大判（高さ 60vh）の縦長だと3人が入らないので、3:2 にして3人とも見せる */
@media (max-width: 1023px) {
  .page:has(.talk) .lmv--wide .lmv__frame { aspect-ratio: 3 / 2; height: auto; }
}

/* 座談会の写真（テーマ2・4のあと） */
.ctphoto { margin: 56px 0 0; }
.ctphoto .ph-frame { aspect-ratio: 3 / 2; }

/* =========================================================
   タブレット（768px から）
   ========================================================= */
@media (min-width: 768px) {
  .pfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 36px; }
  .pfilter__status { margin-left: auto; }
  .ctcard__photo { aspect-ratio: 21 / 9; }
  .ctcard__body { padding: 26px 24px 18px; }
  .ctcard__title { font-size: 26px; }
  .ctcard__text { font-size: 15px; }
  .ivqa__photo { margin-left: 72px; } /* 答えの文の左端にそろえる */
  .ivmsg__bubble { padding: 56px 64px 54px; }
  .ivmsg__text { font-size: 23px; }
  .talk__item { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "face who" "face text"; column-gap: 20px; row-gap: 2px; align-items: start; }
  .talk__face { width: 64px; }
  .talk__who { padding-top: 8px; }
  .talk__list { row-gap: 36px; }
  .ctphoto .ph-frame { aspect-ratio: 21 / 9; }
}

/* =========================================================
   PC：左右に分ける（1024px から）
   ========================================================= */
@media (min-width: 1024px) {
  /* インタビュー 01・03：左に見出し、右に表・時系列（会社を知るの歩みと同じ割り） */
  .profile, .ivday { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; }
  .profile > .sec-head, .ivday > .sec-head { margin-bottom: 0; }
  .ivday__head { position: sticky; top: 120px; }
  .ivday__list { padding-top: 8px; }

  /* インタビュー 05：左に職種、右にほかの社員 */
  .ivmore { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 40px; align-items: start; }
  .ivmore__jobcards { max-width: none; }
  .ivmore__jobcards .job-card__photo { aspect-ratio: 4 / 5; } /* 社員カードの写真と高さをそろえる */
  .ivmore .pcards--2 { max-width: none; }

  /* 座談会 01 */
  .member__in { padding: 56px 28px 16px; }
  .member__tag { left: 28px; }
  .cttoc { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; margin-top: 56px; }
  .cttoc__title::after { content: none; }

  /* 座談会のテーマ：左に問い（スティッキー）、右に発言。1199px までは問いの行（10字）が収まるよう 1:1 に */
  .talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .talk__side { position: sticky; top: 120px; }
  .talk__head { margin-bottom: 0; }
  .talk.is-live .cast { display: grid; row-gap: 10px; margin-top: 40px; }
  .talk.is-live .talk__face { display: none; }
  .talk.is-live .talk__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "text"; }
  .talk.is-live .talk__who { padding-top: 0; }
  .talk.is-live .talk__item::before { /* いま話している発言の左に、オレンジの線（文字の外側） */
    content: ""; position: absolute; top: 6px; bottom: 8px; left: -28px; width: 3px; border-radius: 3px;
    background: var(--color-brand);
    transform: scaleY(0); transform-origin: top center;
    transition: transform .5s var(--ease-out);
  }
  .talk.is-live .talk__item.is-on::before { transform: none; }
  .ctphoto { margin-top: 88px; }
}

@media (min-width: 1200px) {
  /* /people/ 02 座談会の入口：左に写真、右に文（1199px までは写真を上に横長で。3人とも写るように） */
  .ctcard__link { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 10px; }
  .ctcard__photo { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .ctcard__body { padding: 44px 56px 36px 56px; }
  .ctcard__title { font-size: 30px; }
  .ivmsg__text { font-size: 26px; }
  .talk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 104px; }
}

/* 停止：static と「動きを減らす」は最終状態（座談会の丸は crosstalk.js が切り替えないので、各発言の頭の丸のまま） */
@media (prefers-reduced-motion: reduce) {
  .pfilter__chip, .ctcard__photo img, .cast__face, .cast__face::after, .cast__name { transition: none; }
  .ctcard__link:hover .arw svg { animation: none; }
}