@charset "utf-8";

/* ---------------------------
   TOP（index.html）専用スタイル
   共通は common.css、トークンは common.css の :root
   Figma: PC 1440px / SP 390px → px ÷ 10 を rem
----------------------------- */

/* ===================================
    FV + MESSAGE（.kv）

    PC は「FV を画面に固定 → MESSAGE が上に載ってくる」演出。
    タイトルは FV 下端に置いたまま動かさず、MESSAGE の上端を境に
    白 → 赤へ色が切り替わる（JS が --kv-split に境界位置を入れる）。
    Tab/SP は通常フロー（この演出は使わない）。
=================================== */
.kv {
  position: relative;
}

.fv {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100svh;
  background: var(--color-main);
}

/* KV の絵柄を載せる枠。1440:900 を保ったまま .fv を必ず覆うので、
   画面の縦横比が変わっても構図（人物の位置・ロゴの重なり）が崩れない。
   はみ出した分は .fv の overflow: hidden で切り取られる */
.fv__stage {
  position: absolute;
  left: 50%;
  /* 縦は上寄り（30%）で合わせる。中央だと横長・低い画面で頭が切れ、
     上端合わせだと低い画面で顔が大見出しに潜るため、その中間を採る */
  top: 30%;
  width: max(100%, calc(100svh * 1440 / 810));
  aspect-ratio: 1440 / 810;
  transform: translate(-50%, -30%);
  pointer-events: none;
}

/* 人物（Figma A_PC: left -229px / top -57px / 1437×958 = 素材と同じ 3:2） */
.fv__img {
  position: absolute;
  left: -15.9%;
  top: -7.04%;
  width: 99.79%;
  height: auto;
  pointer-events: none;
}

.fv__title {
  /* --kv-split … タイトル上端から MESSAGE 上端までの距離（JS が更新）。
     ここを境に上＝白（FV の赤地）／下＝赤（MESSAGE のグレー地）に塗り分ける。

     .fv は sticky＝スタッキングコンテキストを作るため、タイトルは .fv の外に置く。
     margin-top のマイナスで FV の下端内へ引き上げ、そのまま sticky で貼り付ける。 */
  --kv-split: 200%;
  position: sticky;
  /* 画面が低いときにヘッダーへ潜り込まないよう下限を設ける */
  top: max(var(--header-h), calc(100svh - var(--kv-u) * 33.6));
  z-index: 2; /* MESSAGE(z-index:1) より前面に出して常に読めるようにする */
  margin-top: calc(var(--kv-u) * -33.6);
  margin-left: 1.3rem;
  width: max-content;
  font-family: var(--font-kv); /* この見出しだけ Noto Sans JP */
  font-weight: 900;
  font-size: calc(var(--kv-u) * 14); /* 高さの単位は上の --kv-u（MESSAGE の注記） */
  line-height: 1.2;
  letter-spacing: -0.2em;
  /* body の palt（字詰め）を解除。Figma の字幅（2行目 1253px）に合わせる */
  font-feature-settings: normal;
  color: #fff;
  background-image: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--kv-split),
    var(--color-main) var(--kv-split),
    var(--color-main) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* ---- 読み込み時の登場：人物 → キャッチコピー ----
   人物はわずかに引きながらフェードイン（1.04倍 → 等倍）→ コピーは少し下からフェードイン。
   タイトルは background-clip: text で白／赤を塗り分けているため、行ごとの span に
   transform をかけると Chrome で文字が消える（実測）。要素1つのまま動かす。
   動いている間は KvTitleSplit の測る位置がずれるので、終わったら JS が測り直す */
.fv__img {
  animation: fvImgIn 1.6s cubic-bezier(0.22, 0.68, 0.24, 1) both;
}

.fv__title {
  animation: fvTitleIn 1.2s cubic-bezier(0.22, 0.68, 0.24, 1) 0.4s backwards;
}

@keyframes fvImgIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fvTitleIn {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__img,
  .fv__title {
    animation: none;
  }
}

/* ===================================
    MESSAGE（グレー・テキスト + 赤の大見出し）
=================================== */
/* PC は本文（画面上端に sticky）と大見出し（.fv__title・画面下端に sticky）が
   同じ画面に上下で並ぶため、縦に約 81rem 要る（上余白 4 + 本文 41.4 + 見出し 33.6 + 隙間）。
   rem は画面幅で決まるので、横長の大画面（1920×990 など）では高さが足りず重なる。
   そこで PC だけ、この2つの寸法の単位 --kv-u を「rem」と「画面高 ÷ 82」の小さいほうにする。
   Tab / SP は縦積みで重ならないので 1rem のまま */
:root {
  --kv-u: 1rem;
}

@media screen and (min-width: 1025px) {
  :root {
    --kv-u: min(1rem, 100svh / 82);
  }
}

.message {
  position: relative;
  z-index: 1; /* FV の上に載る */
  display: flex;
  flex-direction: column;
  /* FV を覆う 100svh + 本文を読ませる 100svh。下端の余白はタイトルの着地分。
     画面が低い端末でも本文（約41rem）＋上下の余白（約38rem）が必ず収まるよう、
     画面基準と中身基準の大きいほうを採る */
  min-height: max(200svh, 92rem);
  padding-top: 4rem;
  padding-bottom: calc(var(--kv-u) * 33.6);
  background: var(--color-gray);
  color: var(--color-main);
}

.message__text {
  /* MESSAGE が画面を覆いきった後も本文を画面上部に留めて読ませる */
  position: sticky;
  top: calc(var(--kv-u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kv-u) * 2.3);
  width: calc(var(--kv-u) * 91.4);
  max-width: calc(100% - 4rem);
  margin-left: 32.6%;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: calc(var(--kv-u) * 1.7);
  line-height: 1.353;
  letter-spacing: 0.02em;
}

/* 1文ずつ左からフェードイン（JS が .is-active を付与） */
.message__text > p {
  opacity: 0;
  transform: translateX(-4rem);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.message__text > p.is-active {
  opacity: 1;
  transform: none;
}

/* スクロールを戻したとき（.is-leaving）は、1文ずつではなく全文を
   まとめて自然に消す。位置は動かさず opacity だけ落とす */
.message__text.is-leaving > p {
  transform: none;
  transition: opacity 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .message__text > p {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.message__title {
  display: none; /* PC は fv__title が固定で兼ねる。Tab/SP でのみ表示 */
  margin-top: 1.9rem;
  padding-left: 1.3rem;
  font-family: var(--font-kv); /* この見出しだけ Noto Sans JP */
  font-weight: 900;
  font-size: 14rem;
  line-height: 1.2;
  letter-spacing: -0.2em;
  font-feature-settings: normal; /* FV タイトルと同じく palt を解除 */
  white-space: nowrap;
}

/* ===================================
    PEOPLE（左サイドバーを画面高で固定 + 3ブロック）
=================================== */
.people {
  position: relative;
  display: flex;
  align-items: flex-start;
  background: var(--color-main);
  color: #fff;
}

.people__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* サイドバー（sticky・PEOPLE セクション全体で固定） */
.people__card {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 40.1rem;
  height: 100svh;
  padding: 6.5rem 6.4rem 7.1rem 6.6rem;
  background: #fff;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--color-text);
}

.people__card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.3rem;
  width: 100%;
}

.people__card-full {
  width: 100%;
}

.people__card-compact {
  display: none;
}

.people__desc {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.786;
}

/* 右側：3ブロック（各ブロックは画面高・中央寄せ） */
.people__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

/* hidden で隠すときは display 指定より優先させる（note ブロックの非表示用） */
.people__block[hidden] {
  display: none;
}

.people__block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 6rem 0;
}

.people__head {
  display: flex;
  align-items: flex-start;
  gap: 4.4rem;
  padding-left: 3.8rem;
}

.people__subtitle {
  min-width: 38.2rem;
  flex-shrink: 0;
}

.people__lead {
  width: 45.6rem;
  margin-top: 2.9rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.71;
}

/* ロゴ見出し（CROSS TALK / note） */
.people__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 38.2rem;
  padding-left: 1.3rem;
}

.people__logo--crosstalk .people__logo-en {
  width: 21.6rem;
  height: auto;
  margin-left: 7.75rem;
}

.people__logo--crosstalk .people__logo-main {
  width: 37.1rem;
  height: auto;
  margin-top: 1.3rem;
}

.people__logo--note {
  padding-left: 2.1rem;
}

.people__logo--note .people__logo-main {
  width: 26.2rem;
  height: auto;
}

.people__logo-label {
  margin-top: 1.6rem;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.people__logo + .people__lead {
  margin-top: 2.4rem;
}

/* カード列（サイドバーの下にも潜らせるため左へ張り出す）
   中身は Swiper（common/swiper.js の .JsSlider）。余白は data-slider-gap */
.people__slider {
  width: calc(100% + 40.1rem);
  min-width: 0;
  margin-top: 4.2rem;
  margin-left: -40.1rem;
  overflow: hidden;
}

/* 件数が少なくて固定表示になる場合（swiper.js が .is-static を付与）は、
   流れていかないぶん左のサイドバーの下に潜ったままになるので、本文と同じ左端から並べる */
.people__slider.is-static {
  width: 100%;
  margin-left: 0;
}

/* PC は見出し（.people__head の 3.8rem ＋ ロゴの 1.3rem）と左端をそろえる。
   Tab / SP は .people__slider の padding-left がそのまま効く */
@media screen and (min-width: 1025px) {
  .people__slider.is-static {
    padding-left: 5.1rem;
  }
}

/* 社員インタビューカード */
.interview-card {
  width: 26.6rem;
  flex-shrink: 0;
}

.interview-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.interview-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 266 / 306;
  object-fit: cover;
  border-radius: 2.19rem;
}

.interview-card__title {
  margin-top: 1.8rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.72;
}

.interview-card__name {
  margin-top: 1.4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.interview-card__role {
  margin-top: 1.4rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.2;
  opacity: 0.92;
}

.interview-card__tag {
  display: inline-flex;
  align-items: center;
  margin-top: 1.4rem;
  padding: 0.5rem 1.1rem;
  border: 0.042rem solid rgba(33, 33, 33, 0.18);
  border-radius: 999px;
  /* 赤い背景に埋もれないよう、白地に赤文字（2026-09-23 に反転） */
  background: #fff;
  color: var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.45;
}

/* クロストーク / note カード */
.talk-card {
  width: 42rem;
  flex-shrink: 0;
}

.talk-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.talk-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 258;
  object-fit: cover;
  border-radius: 2.19rem;
}

.talk-card__title {
  margin-top: 1.63rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.67;
}

.talk-card__people {
  /* 1人1行で「名前（太字）＋肩書き」（Figma FIN 3788-19320） */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1rem;
}

.talk-card__person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.8rem;
  font-family: var(--font-sub);
  line-height: 1.45;
}

.talk-card__person-name {
  font-weight: 700;
  font-size: 1.5rem;
}

.talk-card__person-role {
  font-weight: 500;
  font-size: 1.3rem;
}

.talk-card__name {
  margin-top: 0.9rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.45;
}

.talk-card__role {
  margin-top: 0.9rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.45;
}

/* ===================================
    KNOW / WORK / FUTURE（写真 + 白カードの重ね）
=================================== */
.know {
  /* Figma 3770-65175：PEOPLE 下端から 35px・SUSHIRO マーキーまで 16px */
  padding: 3.5rem 0 1.6rem;
  background: var(--color-main);
}

.know__inner {
  display: flex;
  flex-direction: column;
  gap: 6.7rem;
  width: 123.3rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
}

.know__item {
  position: relative;
  display: flex;
  align-items: center;
}

.know__img {
  width: 67%;
  aspect-ratio: 826 / 531;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.know__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.know__item--reverse .know__img {
  width: 64.5%;
  aspect-ratio: 795.5 / 531; /* Figma は3枚とも高さ 530.75px（幅だけ違う） */
  margin-left: auto;
}

.know__item:nth-child(3) .know__img {
  width: 69.8%;
  aspect-ratio: 860.5 / 531;
}

.know__card {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2rem;
  width: 39.1%;
  padding: 4rem;
  background: #fff;
  border-radius: var(--radius-lg);
  transform: translateY(-50%);
}

.know__item--reverse .know__card {
  right: auto;
  left: 0;
}

.know__card .sec-title {
  margin-bottom: -0.1rem;
}

.know__desc {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.714;
  color: var(--color-text);
}

/* ===================================
    REAL / CAREER（グレー・角丸で前セクションに被せる）
=================================== */
.real {
  position: relative;
  z-index: 1;
  margin-top: -7.7rem;
  padding: 15rem 0 20rem;
  background: var(--color-gray);
  border-radius: 5rem 5rem 0 0;
}

.real__inner {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  width: 123.4rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
}

.real__box {
  display: flex;
  flex-direction: column;
  gap: 2.9rem;
  padding: 5rem;
  background: #fff;
  border-radius: var(--radius-lg);
}

.real__head {
  display: flex;
  align-items: center;
  gap: 5.2rem;
  width: 104.8rem;
  max-width: 100%;
}

.real__lead {
  flex: 1;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.786;
  color: var(--color-text);
}

.real__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.1rem;
}

.card-real {
  display: flex;
  flex-direction: column;
  border-radius: 1.85rem;
  overflow: hidden;
}

.card-real__img {
  aspect-ratio: 359 / 195;
}

.card-real__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-real__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 12.14rem;
  padding: 2.3rem 3.8rem;
  background: var(--color-gray);
}

.card-real__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.93rem;
  line-height: 1.45;
  color: var(--color-text-sub);
}

.card-real__sub {
  margin-top: 0.37rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.59rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.career__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.card-career {
  position: relative;
  display: block;
  aspect-ratio: 269 / 308;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #fff;
}

.card-career__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-career__text {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: 1.7rem;
}

.card-career__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.76rem;
  line-height: 1.45;
  margin-bottom: -0.3rem;
  white-space: nowrap;
}

.card-career__ja--tight {
  letter-spacing: -0.09em;
}

.card-career__ja--en {
  font-family: var(--font-en);
  font-weight: 600;
}

.card-career__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2.38;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===================================
    RECRUIT（赤・角丸）
=================================== */
.recruit {
  position: relative;
  z-index: 1;
  margin-top: -5rem;
  padding: 15rem 0 20.2rem;
  background: var(--color-main);
  border-radius: 5rem 5rem 0 0;
  color: #fff;
}

.recruit__inner {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  width: 116.3rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
}

.recruit__top {
  display: flex;
  align-items: center;
  gap: 12.2rem;
}

.recruit__intro {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  width: 24.7rem;
  flex-shrink: 0;
}

.recruit__lead {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.786;
}

.recruit__cards {
  display: flex;
  gap: 3rem;
  flex: 1;
}

.card-recruit {
  display: flex;
  flex-direction: column;
  width: 33.6rem;
  height: 27.7rem;
  flex-shrink: 0;
  border-radius: var(--radius-md); /* 20px */
  overflow: hidden;
  background: #fff; /* 写真の四隅を丸めたので、角の裏は白地（ENTRY カードと同じ） */
}

.card-recruit__img {
  height: 16.87rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card-recruit__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-recruit__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex: 1;
  padding: 3rem 3.2rem;
  background: #fff;
}

.card-recruit__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.93rem;
  line-height: 1.45;
  color: var(--color-text-sub);
}

.recruit__side {
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
  flex: 1;
  min-width: 0;
}

.card-recruit-h {
  display: flex;
  height: 12.8rem;
  border-radius: var(--radius-md); /* 20px */
  overflow: hidden;
  background: #fff; /* 写真の四隅を丸めたので、角の裏は白地 */
}

.card-recruit-h__img {
  width: 14rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card-recruit-h__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-recruit-h__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex: 1;
  padding: 3.5rem 2rem;
  background: #fff;
}

.card-recruit-h__title {
  width: 14.4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.45;
  color: var(--color-text-sub);
}

.recruit__banners {
  display: flex;
  gap: 2.5rem;
}

.recruit__banners > li {
  flex: 1;
  min-width: 0;
}

/* 写真は角丸・暗い重ねを焼き込んだ画像をそのまま使う（ユーザー指示）。
   切り取ると角丸が欠けるので、枠の比率を画像と同じにして全体を見せる */
.banner {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  aspect-ratio: 741 / 286;
  padding: 0 4rem;
  color: #fff;
}

.banner__img {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.banner__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.banner__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.banner__title--sm {
  font-size: 2rem;
}

/* ===================================
    Tablet（751〜1024px）
=================================== */
@media screen and (max-width: 1024px) {
  /* KNOW / WORK / FUTURE：Tab は rem が 10px 固定で画像だけ縮むため、白カードが画像の上下へはみ出す。
     PC の Figma 値（間隔 6.7rem）のままだと上下のカード同士がぶつかるので広げる */
  .know {
    padding: 8rem 0 6rem;
  }

  .know__inner {
    gap: 10rem;
  }

  /* KV の固定演出は PC のみ。Tab/SP は通常フローに戻す */
  .fv {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Tab/SP は器が 16:9 で縦横比が固定されるため、ステージは無効化して
     絵柄をこれまでどおり .fv 基準で置く */
  .fv__stage {
    position: static;
    width: auto;
    aspect-ratio: auto;
    transform: none;
  }

  .message {
    z-index: auto;
    min-height: 0;
    padding-bottom: 0;
  }

  .message__text {
    position: static;
  }

  /* タイトルは .kv 直下にあるため、Tab では FV(56.25vw) の下端に来る位置を top で指定する
     （タイトル高 = 11vw × line-height 1.2 × 2行 = 26.4vw） */
  .fv__title {
    position: absolute;
    top: calc(56.25vw - 26.4vw);
    bottom: auto;
    left: 1.3rem;
    z-index: auto;
    margin-top: 0;
    margin-left: 0;
    width: auto;
    background-image: none;
    -webkit-text-fill-color: #fff;
  }

  .message__title {
    display: block;
  }

  /* 大見出しは nowrap のため画面幅基準にする（Tab デザインは未提供） */
  .fv__title,
  .message__title {
    font-size: 11vw;
  }

  .message__text {
    margin-left: 4rem;
  }

  /* PEOPLE：左サイドバー固定は幅 800px 未満で成立しないため縦積みへ */
  .people {
    flex-direction: column;
    align-items: stretch;
    padding: 8rem 0;
  }

  /* ヘッダーの真下に貼り付く。ヘッダーが引っ込んでいる間（body.header-hidden）は
     画面上端まで上がり、ヘッダーが出てきたらその分だけ下がる。

     ずらす量は top ではなく transform で持つ。sticky の top を動かすと
     ブラウザが貼り付き位置を計算し直すため、スクロール中にカクついたり
     指を離した瞬間に飛んだりする。transform なら合成だけで済むので滑らか。
     速さ・イージングはヘッダー本体（transform 0.4s ease）と揃えている */
  .people__card {
    position: sticky;
    top: 0.5rem;
    display: block;
    width: auto;
    height: auto;
    margin: 0 4rem;
    padding: 4rem;
    border-radius: 3rem;
    transform: translateY(calc(var(--header-h) - 0.5rem));
    will-change: transform;
    transition: padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s ease;
  }

  body.header-hidden .people__card {
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .people__card {
      transition: none;
    }
  }

  .people__card-inner {
    gap: 2.4rem;
  }

  /* 固定後は横並びに縮小（SP と同じ挙動。JS が .is-compact を付与） */
  .people__card-full {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease 0.1s;
  }

  .people__card-full .people__card-inner {
    min-height: 0;
    overflow: hidden;
  }

  .people__card-compact {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .people__card-compact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 0;
    overflow: hidden;
  }

  .people__title--compact {
    margin-bottom: 0;
  }

  .people__card.is-compact {
    padding: 2rem 3rem;
    border-radius: 2.5rem;
  }

  .people__card.is-compact .people__card-full {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .people__card.is-compact .people__card-compact {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease 0.2s;
  }

  .people__body {
    margin-top: 6rem;
  }

  .people__block {
    min-height: 0;
    padding: 0;
  }

  .people__block + .people__block {
    margin-top: 8rem;
  }

  .people__head {
    flex-direction: column;
    gap: 1.6rem;
    padding-left: 4rem;
  }

  .people__subtitle,
  .people__logo,
  .people__logo--note {
    min-width: 0;
    padding-left: 0;
  }

  .people__lead {
    width: auto;
    margin-top: 0;
  }

  .people__slider {
    width: 100%;
    margin-left: 0;
    padding-left: 4rem;
  }

  .real__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }

  .career__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .recruit__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }

  .recruit__intro {
    width: 100%;
    gap: 2rem;
  }

  /* RECRUIT のカード群は横並びだと 900px 以下で溢れるため縦積みへ */
  .recruit__cards {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
  }

  .card-recruit {
    width: 100%;
    height: auto;
  }

  .card-recruit__img {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .card-recruit-h__body {
    justify-content: space-between;
    padding: 2rem;
  }

  .card-recruit-h__title {
    width: auto;
    flex: 1;
  }

  .recruit__banners {
    flex-direction: column;
    gap: 1.6rem;
  }

  /* 1024px 以下は横長の SP 用画像に切り替わる（<picture>）ので比率も合わせる */
  .banner {
    aspect-ratio: 697 / 200;
  }

  .banner__title,
  .banner__title--sm {
    font-size: 2rem;
    letter-spacing: 0;
  }
}

/* ===================================
    SP（〜750px）Figma「TOP｜SP 375px」（390 幅）準拠
=================================== */
@media screen and (max-width: 750px) {
  /* ---- KV ---- */
  .fv {
    aspect-ratio: auto;
    height: 68rem;
  }

  /* 人物（Figma SP KV: left -11.03% / top 185px / width 133.85%） */
  .fv__img {
    left: 5rem;
    top: 18.5rem;
    width: 90%;
  }

  .fv__title {
    left: 1.1rem;
    bottom: auto;
    top: 8.5rem;
    font-size: 5.3rem;
    line-height: 1.097;
    letter-spacing: -0.15em;
  }

  /* ---- MESSAGE（SP は大見出しが先） ---- */
  .message {
    padding: 8.5rem 1rem;
  }

  .message__title {
    order: -1;
    margin-top: 0;
    padding-left: 0;
    font-size: 5.3rem;
    line-height: 1.097;
    letter-spacing: -0.15em;
  }

  .message__text {
    width: 35.1rem;
    max-width: 100%;
    margin: 3.6rem 0 0 0.95rem;
    gap: 2.5rem;
    font-size: 1.5rem;
    line-height: 1.667;
    letter-spacing: 0;
  }

  /* ---- PEOPLE（カードは上部固定・スクロールで縮小） ---- */
  .people {
    flex-direction: column;
    align-items: stretch;
    padding: 7.488rem 0;
  }

  /* 貼り付き位置とヘッダー追従（top / transform / transition）は
     1024px 以下の指定をそのまま使う。ここで上書きすると二重にずれて
     ヘッダーとの間に隙間ができるので、余白まわりだけを変える */
  .people__card {
    margin: 0 2.08rem;
    padding: 2.9rem;
    border-radius: 4rem;
  }

  .people__card-inner {
    gap: 0;
  }

  .people__title {
    margin-bottom: 1.456rem;
  }

  .people__title .sec-title__en {
    font-size: 3.6rem;
    letter-spacing: 0.01em;
    margin-bottom: -0.49rem;
  }

  .people__title .sec-title__ja {
    font-family: var(--font-sub);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .people__desc {
    margin-bottom: 1.872rem;
    font-family: var(--font-sub);
  }

  /* 通常レイアウト：グリッド行 1fr→0fr で高さを補間しつつフェイドアウト */
  .people__card-full {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease 0.1s;
  }

  .people__card-full .people__card-inner {
    min-height: 0;
    overflow: hidden;
  }

  /* 縮小レイアウト：0fr→1fr で立ち上がり、遅れてフェイドイン */
  .people__card-compact {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .people__card-compact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 0;
    overflow: hidden;
  }

  .people__title--compact {
    margin-bottom: 0;
  }

  .people__title--compact .sec-title__en {
    font-size: 3rem;
    margin-bottom: -0.19rem;
  }

  /* 縮小状態（スクロール開始後） */
  .people__card.is-compact {
    padding: 1.604rem 2.496rem;
    border-radius: 2.5rem;
  }

  .people__card.is-compact .people__card-full {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .people__card.is-compact .people__card-compact {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease 0.2s;
  }

  @media (prefers-reduced-motion: reduce) {
    .people__card,
    .people__card-full,
    .people__card-compact {
      transition: none;
    }
  }

  .people__body {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    margin-top: 6rem;
    padding-bottom: 10rem;
  }

  .people__block {
    min-height: 0;
    padding: 0;
  }

  .people__head {
    flex-direction: column;
    gap: 1.7rem;
    padding: 0 2.08rem;
  }

  .people__subtitle {
    min-width: 0;
  }

  .people__subtitle .sec-title__en {
    font-size: 3.7rem;
    letter-spacing: 0.04em;
    margin-bottom: -0.49rem;
  }

  .people__subtitle .sec-title__ja {
    font-family: var(--font-sub);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
  }

  .people__lead {
    width: auto;
    margin-top: 0;
    line-height: 1.709;
  }

  .people__logo,
  .people__logo--note {
    min-width: 0;
    padding-left: 0;
  }

  .people__logo--crosstalk .people__logo-en {
    width: 10.96rem;
    margin-left: 3.93rem;
  }

  .people__logo--crosstalk .people__logo-main {
    width: 18.82rem;
    margin-top: 0.67rem;
  }

  .people__logo--note .people__logo-main {
    width: 12.02rem;
  }

  .people__logo-label {
    margin-top: 1.1rem;
    font-family: var(--font-sub);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
  }

  .people__logo + .people__lead {
    margin-top: 0;
  }

  .people__slider {
    width: 100%;
    margin: 1.9rem 0 0;
    padding-left: 2.08rem;
  }

  .interview-card {
    width: 16.016rem;
  }

  .interview-card__img {
    aspect-ratio: 160 / 185;
    border-radius: 1rem;
  }

  .interview-card__title {
    margin-top: 1.248rem;
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .interview-card__name {
    margin-top: 1.248rem;
    font-size: 1.4rem;
  }

  .interview-card__role {
    margin-top: 0.416rem;
    font-size: 1.2rem;
  }

  .interview-card__tag {
    display: none;
  }

  .talk-card {
    width: 24rem;
  }

  .talk-card__img {
    aspect-ratio: 240 / 147;
    border-radius: 1rem;
  }

  .talk-card__title {
    margin-top: 1.248rem;
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .talk-card__name {
    margin-top: 1.248rem;
    font-weight: 700;
    font-size: 1.4rem;
  }

  .talk-card__people {
    margin-top: 1rem;
  }

  .talk-card__person-name {
    font-size: 1.4rem;
  }

  .talk-card__person-role {
    font-size: 1.2rem;
  }

  .talk-card__role {
    margin-top: 0.416rem;
    font-size: 1.2rem;
    opacity: 0.92; /* 赤地の上で 4.5:1 を満たす下限 */
  }

  /* ---- KNOW / WORK / FUTURE ---- */
  .know {
    padding: 1.732rem 0 1rem;
  }

  .know__inner {
    gap: 6.292rem;
    max-width: calc(100% - 4.16rem);
  }

  .know__item {
    flex-direction: column;
    align-items: stretch;
  }

  .know__img,
  .know__item--reverse .know__img,
  .know__item:nth-child(3) .know__img {
    width: 100%;
    margin: 0;
    aspect-ratio: 348 / 202;
    border-radius: 2.5rem 2.5rem 0 0;
  }

  .know__card,
  .know__item--reverse .know__card {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    margin-top: -3.12rem;
    padding: 2.9rem;
    gap: 0;
    border-radius: 4rem;
    transform: none;
  }

  .know__card .sec-title {
    margin-bottom: 1.456rem;
  }

  .know__card .sec-title__ja {
    font-family: var(--font-sub);
    font-size: 1.4rem;
  }

  .know__desc {
    margin-bottom: 1.872rem;
    line-height: 1.571;
  }

  /* ---- REAL / CAREER ---- */
  /* Figma 3770-65390：グレー地の上下 28px・白箱は左右 20.8px いっぱい（348.4px）・中の上下 30px。
     下は RECRUIT が 4.3rem 被さるので、見える余白 2.8rem にその分を足す */
  .real {
    margin-top: 0;
    padding: 2.8rem 2.08rem 7.1rem;
    border-radius: 3rem 3rem 0 0;
  }

  .real__inner {
    gap: 5rem;
    width: auto;
    max-width: none;
  }

  .real__box {
    gap: 0;
    padding: 3rem 2.08rem;
    border-radius: 3rem;
  }

  .real__box:nth-child(2) {
    padding-bottom: 4rem;
  }

  .real__head {
    width: auto;
    gap: 2.288rem;
    margin-bottom: 3.12rem;
  }

  .real__head .sec-title__ja {
    font-family: var(--font-sub);
    font-size: 1.4rem;
    letter-spacing: 0.06em;
  }

  .real__lead {
    font-family: var(--font-sub);
    line-height: 1.709;
  }

  .real__list {
    grid-template-columns: 1fr;
    gap: 2.08rem;
  }

  .card-real {
    border-radius: 1.5rem;
  }

  .card-real__img {
    aspect-ratio: 303 / 179;
  }

  .card-real__body {
    height: auto;
    padding: 1.872rem 1.664rem 1.872rem 2.08rem;
  }

  .card-real__title {
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #212121;
  }

  .card-real__sub {
    margin-top: 0.52rem;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: #212121;
    opacity: 0.6;
  }

  /* SP は横長カードの縦1列（Figma 3770-65396）。写真は SP 用に Figma どおり切り出した横長画像（imgCareerSp0x）に <picture> で切り替える */
  .career__list {
    grid-template-columns: 1fr;
    gap: 1.56rem;
  }

  .card-career {
    aspect-ratio: auto;
    height: 13rem;
    border-radius: 2rem;
  }

  .card-career__text {
    left: 1.664rem;
    right: 1.248rem;
    bottom: 1.664rem;
  }

  .card-career__ja {
    margin-bottom: 0.312rem;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
  }

  .card-career__ja--tight {
    letter-spacing: 0.02em; /* 文字の大きさはほかと同じ 17px（2026-09-23 ユーザー指示） */
  }

  .card-career__en {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- RECRUIT ---- */
  .recruit {
    margin-top: -4.3rem;
    padding: 7.488rem 2.08rem 8.32rem;
    border-radius: 3rem 3rem 0 0;
  }

  .recruit__inner {
    gap: 3.744rem;
    width: auto;
    max-width: none;
  }

  .recruit__top {
    gap: 3.12rem;
  }

  .recruit__intro {
    gap: 2.288rem;
  }

  .recruit__intro .sec-title__ja {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .recruit__lead {
    line-height: 1.709;
  }

  .recruit__cards {
    flex-direction: column;
    gap: 1.456rem;
  }

  .card-recruit {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }

  .card-recruit__img {
    height: auto;
    aspect-ratio: 348 / 179;
  }

  .card-recruit__body {
    padding: 1.872rem 1.664rem 1.872rem 2.08rem;
  }

  .card-recruit__title {
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #212121;
  }

  .recruit__side {
    gap: 1.456rem;
  }

  .card-recruit-h {
    height: 10rem;
    border-radius: var(--radius-md);
  }

  .card-recruit-h__img {
    width: 10rem;
  }

  .card-recruit-h__body {
    justify-content: space-between;
    gap: 1.664rem;
    padding: 0 1.664rem;
  }

  .card-recruit-h__title {
    width: auto;
    flex: 1;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #212121;
  }

  .recruit__banners {
    flex-direction: column;
    gap: 1.248rem;
  }

  .banner {
    padding: 0 2.08rem;
  }

  .banner__title,
  .banner__title--sm {
    font-size: 1.7rem;
    letter-spacing: 0;
  }

}