/* ============================================================
   TOP PAGE Styles
   design-spec.json 全座標・色・フォント 精密準拠
   アートボード 1920×6093px → 1280px幅基準 (×0.667縮約)
   ============================================================ */

/* ============================================================
   スケール係数: 1920px → 1280px  = 0.667
   design-spec px値 × 0.667 = 1280px基準 px

   簡略化ルール:
     - max-width: 1280px コンテナで全幅頭打ち
     - フォントサイズ: design-spec値そのまま使用（テキストは読みやすいサイズ維持）
     - 余白/座標: 0.667縮約 or コンテナ内 %で再計算
   ============================================================ */

/* ============================================================
   0. ページ全体の縦グラデーション背景
   MV直後（MESSAGE）から WORKSTYLE 終端まで
   ほぼ白 (#FAFCFD) → 青 (#0063AE)
   ============================================================ */
main {
  background: linear-gradient(180deg,
    rgba(250, 252, 253, 1) 0.06%,
    rgba(248, 251, 252, 1) 24.43%,
    rgba(239, 246, 250, 1) 38.19%,
    rgba(226, 237, 245, 1) 49.31%,
    rgba(206, 225, 239, 1) 59.02%,
    rgba(180, 209, 231, 1) 67.82%,
    rgba(149, 190, 221, 1) 75.95%,
    rgba(111, 167, 209, 1) 83.57%,
    rgba(68, 140, 195, 1) 90.78%,
    rgba(20, 111, 180, 1) 97.42%,
    rgba(0, 99, 174, 1) 99.94%
  );
}


/* ============================================================
   1. MV（メインビジュアル）
   アートボード Y: 0 〜 1082px
   design-spec: 工場写真 x=-253.5, y=-349.1, w=2248.7, h=1499.7
   ============================================================ */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.mv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* KV reveal overlay */
.mv__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--kv-overlay-color, #cdd8d9);
  z-index: 2;
  transition: transform 0.68s var(--ease-out);
  transform: translateX(0);
}

.mv.is-active .mv__bg::after {
  transform: skewX(-26deg) translateX(-130%);
}

.mv__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  display: block;
  transition: transform 1.6s var(--ease-out);
  transform: scale(1.06);
}

.mv.is-active .mv__bg-img {
  transform: scale(1);
}

/* MVコンテンツの出現アニメーション（is-active前は非表示） */
.mv:not(.is-active) .mv__content {
  opacity: 0;
}

.mv .mv__content {
  transition: opacity 0.8s var(--ease-out) 0.5s;
}

/* 暗いオーバーレイ（青みがかったダーク、左側を覆う） */
.mv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(4, 10, 18, 0.82) 0%,
    rgba(4, 14, 28, 0.65) 40%,
    rgba(4, 10, 18, 0.15) 100%
  );
  z-index: 1;
}

/* ============================================================
   ティザー動画バッジ（右上）
   design-spec: x=1631.8, y=64.2, w=240.1, h=50.3
   fill=#af0000, fontSize=20px (Yu Go Medium)
   text: x=1681.8, y=81.8
   1280基準: x≈1087, w≈160, h≈34
   ============================================================ */
.mv__teaser {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
}

.mv__teaser-btn {
  /* design-spec: rect w=240.1, h=50.3 (1920基準) → ×0.667 = w=160, h=33 (1280基準)
     横書き赤バッジ（カンプ準拠） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  min-width: 160px;
  min-height: 40px;
  background-color: #af0000;
  color: #ffffff;
  font-family: var(--jp-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.mv__teaser-btn:hover {
  background-color: #8a0000;
}

/* ============================================================
   MV コンテンツエリア（左）
   design-spec キャッチ: x=122.7, y=479.7
   1280基準: left≈82px
   ============================================================ */
.mv__content {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 82px;
  padding-right: 60px;
  color: #ffffff;
  max-width: 660px;
}

/* ロゴ
   design-spec: RECRUITMENT x=241.8, y=381.1, fontSize=22.4px
   logomark at x≈162.7 (blue rect)
   MVロゴ全体: 上から約 381px の位置
   キャッチコピーとの差: 479.7-381.1=98.6px → 1280基準≈66px
*/
.mv__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 46px;
  color: #ffffff;
  text-decoration: none;
}

.mv__logo:hover {
  opacity: 0.85;
}

.mv__logo-mark {
  flex-shrink: 0;
}

.mv__logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 東信化学工業株式会社
   実際には MV ではこのフォントが日本語テキストなので Shippori Mincho を使用
   design-spec の 「東信化学工業株式会社」はテキストエリアに見つからないが
   RECRUITMENT が Century Gothic Pro Bold → Montserrat、24.4px
   sub-header では fontSize=22.4px (Century Gothic Regular)
*/
.mv__logo-company {
  display: block;
  font-family: var(--jp-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  color: #ffffff;
}

/* RECRUITMENT
   design-spec: X=241.8, Y=381.1, fontSize=22.4px Century Gothic Bold
   tracking=400 → 0.4em
*/
.mv__logo-sub {
  display: block;
  font-family: var(--en-font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.5;
}

/* キャッチコピー「変わる力」が、続く力になる。
   design-spec: x=122.7, y=479.7, fontSize=24px (A1Mincho Bold)
   tracking=400, leading=42
   color=#ffffff
*/
.mv__catch {
  font-family: var(--jp-font);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: calc(42 / 24);
  margin-bottom: 28px;
  color: #ffffff;
  white-space: nowrap;
}

/* リードコピー
   design-spec: x=124.9, y=546.8, fontSize=20px (Yu Go Medium)
   tracking=200, leading=35, 3行
*/
.mv__lead {
  font-family: var(--jp-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 60px;
}

/* ENTRY テキストリンク（下線のみ）
   design-spec: x=307.8, y=714.1, fontSize=22.4px (Century Gothic Regular)
   tracking=400
   1280基準: x≈205
*/
.mv__entry-link {
  display: inline-block;
  font-family: var(--en-font-sans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.4em;
  line-height: 1.75;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  padding-bottom: 4px;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.mv__entry-link:hover {
  border-color: #ffffff;
  opacity: 1;
}

/* ============================================================
   2. ニュースバー（MV底辺）
   design-spec: rect x=0, y=1002.8, w=640, h=80, fill=#fff
   date: x=34.2, y=1032.9, fontSize=20px Yu Go, color=#0063ae, tracking=100
   text: x=172.5, y=1032.8, fontSize=20px Yu Go, color=#231815, tracking=200
   1280基準: w≈427, left=0, bottom=0, h≈53
   ============================================================ */
.news-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 14px 24px 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
  min-width: 427px;
}

.news-bar__date {
  font-family: var(--jp-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #0063ae;
  white-space: nowrap;
}

.news-bar__text {
  font-family: var(--jp-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.75;
  color: #231815;
}


/* ============================================================
   4. MESSAGE セクション
   design-spec:
   見出し: x=724.8, y=1305.5, fontSize=28px (A1Mincho Bold), color=#231815
     tracking=200 (200/1000=0.2em)
   本文: x=749.6, y=1383.8, fontSize=16px (A1Mincho Bold)
     tracking=75, leading=28

   1280基準:
     見出し X=724.8 → コンテナ内中央寄せ（x≈ 483）
     上端 Y=1305.5 - 1170(ヘッダー後) ≈ 135px → top padding
   ============================================================ */
.top-message {
  padding: 90px 40px 80px;
  text-align: center;
}

.top-message__inner {
  max-width: 600px;
  margin: 0 auto;
}

/* 「変わる力」が、続く力になる。
   design-spec: fontSize=28px (A1Mincho Bold), color=#231815
   tracking=200, leading=49
*/
.top-message__heading {
  font-family: var(--jp-font);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: calc(49 / 28);
  color: #231815;
  margin-bottom: 40px;
}

/* 本文
   design-spec: fontSize=16px (A1Mincho Bold)
   tracking=75, leading=28
*/
.top-message__body {
  font-family: var(--jp-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: calc(28 / 16);
  color: #231815;
  text-align: center;
}

.top-message__body p {
  margin-bottom: 24px;
}

.top-message__body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   5. VIDEO セクション
   design-spec: Y≈1886〜2530
   動画エリア: x=387.4, y=1886.2, w=1145.1, h=643.6
   1280基準: x≈258, w≈763
   ============================================================ */
.top-video {
  padding: 60px 40px 80px;
}

.top-video__inner {
  max-width: 860px;
  margin: 0 auto;
}

.top-video .video-thumb .img-placeholder {
  aspect-ratio: 16 / 9;
  background: #07101e;
}

/* ============================================================
   6. ABOUT セクション
   design-spec: Y=2750〜3369
   ABOUT: x=146.1, y=2750.3, fontSize=72.3px (Bodoni Moda Italic SemiBold), color=#231815
   MESSAGE label: x=146.8, y=2876.4, fontSize=16px (Century Gothic Bold), color=#0063ae, tracking=400
   採用メッセージ: x=147.2, y=2920.5, fontSize=28px (A1Mincho Bold), tracking=200
   VIEW MORE: x=607.0, y=2920.8, fontSize=16px (Century Gothic Bold), color=#231815
   What's TOSHIN label: x=146.8, y=3001.8, fontSize=16px, color=#0063ae
   東信化学工業を知る: x=147.2, y=3045.9, fontSize=28px

   写真4枚（右側）:
   158.jpg: x=490.7, y=2582.4, w=948.9, h=632.9 → 158 is first (leftmost in Y)
   280.jpg: x=753.5, y=2742.3, w=983.9, h=656.5
   188.jpg: x=882.6, y=2596.6, w=974.9, h=650.2
   154.jpg: x=1193.8, y=2725.7, w=1103.4, h=736.0

   1280基準:
   コンテナ padding-left≈97px (146×0.667)
   ============================================================ */
.top-about {
  padding: calc(83rem / 16) 0 120px;
  overflow: hidden;
}

/* pAbout__inner 準拠 — デスクトップ: flex横並び、モバイル: 縦積み */
.top-about__inner {
  padding: 0 30px;
}

/* pAbout__content 準拠 */
.top-about__content {
  display: flex;
  flex-direction: column;
}

/* ABOUT 見出し — pAbout__headline 準拠
   デスクトップでは order:3 で最下段に移動 */
.top-about__headline {
  position: relative;
  width: fit-content;
  font-family: var(--en-font);
  font-size: calc(60rem / 16);
  font-weight: 600;
  font-style: italic;
  line-height: 1.38;
  letter-spacing: 0;
  color: #231815;
  mix-blend-mode: difference;
  /*color: var(--white, #fff);*/
}

.top-about__headline::after {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: currentcolor;
  transition: transform 0.8s var(--ease-out) 0.2s;
  transform: scaleX(0);
  transform-origin: left;
}

.top-about__headline.is-active::after,
.top-about__content.is-visible .top-about__headline::after {
  transform: scaleX(1);
}

/* pAbout__lead 準拠 */
.top-about__lead {
  margin-top: calc(24rem / 16);
  font-family: var(--jp-font);
  font-size: calc(14rem / 16);
  font-weight: 500;
  line-height: 1.92;
  letter-spacing: 0.04em;
  color: #231815;
}

/* pAbout__links 準拠 */
.top-about__links {
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 16);
  width: min(315px, 100%);
  margin-top: calc(40rem / 16);
}

.top-about__link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #231815;
  text-decoration: none;
}

.top-about__link:hover {
  opacity: 1;
}

.top-about__link_headline {
  display: flex;
  flex-direction: column;
}

.top-about__link_headline_sub {
  font-family: var(--en-font-sans);
  font-size: calc(10rem / 16);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.7;
  color: #0063ae;
  display: block;
}

.top-about__link_headline_main {
  font-family: var(--jp-font);
  /*font-size: calc(20rem / 16);*/
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #231815;
  display: block;
}

.top-about__link .cViewMore {
  margin-bottom: calc(6rem / 16);
  color: #231815;
}

/* pAbout デスクトップ: flex横並び + order再配置 */
@media (min-width: 768px) {
  .top-about__inner {
    display: flex;
    gap: 5.86vw;
    align-items: center;
    justify-content: flex-end;
    padding-left: 7.32vw;
  }

  .top-about__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: -15px;
    flex-shrink: 0;
  }

  /* order再配置: lead → links → headline */
  .top-about__headline {
    order: 3;
    margin-top: calc(53rem / 16);
    font-size: calc(80rem / 16);
    line-height: 1.35;
  }

  .top-about__headline::after {
    bottom: 10px;
  }

  .top-about__lead {
    order: 1;
    margin-top: 0;
  }

  .top-about__links {
    order: 2;
    gap: calc(24rem / 16);
    width: calc(306rem / 16);
    margin-top: calc(51rem / 16);
  }

  .top-about__photos {
    width: 64.42vw;
    flex-shrink: 1;
    margin-right: 0;
  }
}

/* 右列：写真4枚 階段状
   design-spec Y-position (artboard):
   158.jpg: y=2582.4 (アートボードから)
   280.jpg: y=2742.3
   188.jpg: y=2596.6
   154.jpg: y=2725.7

   X-position (artboard):
   158.jpg: x=490.7 → 最左
   280.jpg: x=753.5 → 2番目
   188.jpg: x=882.6 → 3番目
   154.jpg: x=1193.8 → 最右

   縦オフセット差（4枚の階段状配置）:
   158.jpg: deltaY=0
   280.jpg: deltaY≈+160px (Y差: 2742-2582=160)
   188.jpg: deltaY≈+14px (Y差: 2596-2582=14)
   154.jpg: deltaY≈+143px (Y差: 2725-2582=143)

   1280基準: Y差 × 0.667
   158: 0
   280: +107px
   188: +9px
   154: +95px
*/
.top-about__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-items: start;
  margin-top: calc(39rem / 16);
  overflow: hidden;
}

.top-about__photo {
  position: relative;
  overflow: hidden;
}

.top-about__photo img {
  width: 100%;
  display: block;
}

.top-about__photo--1 { margin-top: 0; }
.top-about__photo--2 { margin-top: 107px; }
.top-about__photo--3 { margin-top: 9px; }
.top-about__photo--4 { margin-top: 95px; }

/* ============================================================
   7. PERSON セクション
   design-spec: Y=3369〜4520
   PERSON: x=146.4, y=3369.5, fontSize=72.3px (Bodoni Moda Italic SemiBold), color=#231815
   部門と人: x=149.2, y=3460.4, fontSize=28px (A1Mincho Bold), color=#231815, tracking=200

   背景: なし（白）

   上段カード配置（2枚）:
   01(茨城工場): x=30.6, y=3821.2 → 左寄り（グリッド1列目）
   02(東京本社): x=992.5, y=3824.3 → 右寄り（グリッド2列目）
   画像01: 20260327_toshin_62.jpg (x=-32.5 → 全幅へ)
   画像02: 20260318_toshin_463.jpg (x=797.7)

   下段カード配置（3枚）:
   03: x=21.3, y=4283.1
   04: x=661.3, y=4283.1
   05: x=1301.3, y=4283.1
   ============================================================ */
.top-person {
  padding-top: 80px;
  padding-bottom: 0;
}

.top-person__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 97px;
}

.top-person__header {
  margin-bottom: 24px;
}

/* PERSON
   design-spec: fontSize=72.3px → 1280基準: 48px
*/
.top-person__title-en {
  font-family: var(--en-font);
  font-size: 48px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  line-height: calc(76.6 / 72.3);
  color: #231815;
  display: block;
}

/* 部門と人
   design-spec: fontSize=28px (A1Mincho Bold), tracking=200, leading=49
*/
.top-person__title-ja {
  font-family: var(--jp-font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: calc(49 / 28);
  color: #231815;
  display: block;
  margin-top: 4px;
}

/* グリッド — 内padding打ち消しで全幅 */
.top-person__grid-top,
.top-person__grid-bottom {
  margin-left: -97px;
  margin-right: -97px;
}

/* 上段2枚 */
.top-person__grid-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-bottom: 3px;
  margin-top: 32px;
}

/* 下段3枚 */
.top-person__grid-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding-bottom: 0;
}

/* 人物カード */
.person-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #231815;
}

.person-card__img {
  width: 100%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.person-card:hover .person-card__img {
  transform: scale(1.04);
}

/* オーバーレイ */
.person-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.40) 50%,
    transparent 100%
  );
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.person-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 01, 02, 03...
   design-spec: fontSize=72.3px (Bodoni Moda Italic SemiBold), color=#ffffff
   1280基準: 48px
*/
.person-card__number {
  font-family: var(--en-font);
  font-size: 48px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0;
}

/* 部署名
   design-spec: fontSize=16px (A1Mincho Bold), color=#ffffff, tracking=0, leading=19
*/
.person-card__dept {
  font-family: var(--jp-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(19 / 16);
  color: rgba(255, 255, 255, 0.95);
}

.person-card__role {
  font-family: var(--jp-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.5;
}

/* VIEW MORE */
.person-card__more {
  flex-shrink: 0;
  color: #ffffff;
  align-self: flex-end;
}

.person-card__more.cViewMore {
  width: auto;
  min-width: 100px;
}

.person-card__more .cViewMore__text {
  font-family: var(--en-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
}

/* ============================================================
   8. WORKSTYLE AND CAREER セクション
   design-spec: Y=4534〜5800
   WORKSTYLE: x=148.2, y=4534.9, fontSize=72.3px (Bodoni Moda Italic SemiBold), color=#231815
   ANDCAREER: fontSize=26.3px, leading=16.1

   背景色カード:
   クロストーク背景: f5f5f5 (x=94.2, y=4725.5)
   入社後背景: dce9ef (x=674.5, y=4725.5)
   キャリア背景: b6d0e4 (x=1254.8, y=4725.5)
   働く環境背景: bcc5de (x=94.2, y=5310.0)
   福利厚生背景: 6ea6d1 (x=960.0, y=5310.0)

   カードラベル:
   クロストーク: x=158.0, y=4776.9, fontSize=28px A1Mincho Bold
   入社後の働き方: x=724.1, y=4776.9, fontSize=28px
   キャリアデザイン: x=1305.0, y=4776.9, fontSize=28px
   働く環境: x=158.0, y=5357.4, fontSize=28px
   福利厚生・研修制度: x=1016.2, y=5357.4, fontSize=28px

   写真（上段3枚）:
   411.jpg（クロストーク）: x=-116.6, y=4770, w=816, h=544.2
   398.jpg（入社後）: x=631.8, y=4777.9, w=1070.3, h=713.9
   110.jpg（キャリア）: x=1085.9, y=4780.4, w=796.2, h=531

   1280基準:
   3枚上段: 各w≈427px (1280/3)
   2枚下段: 各w≈640px (1280/2)
   見出し left≈99px
   ============================================================ */
.top-workstyle {
  padding-top: 80px;
  padding-bottom: 80px;
}

.top-workstyle__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 99px;
}

/* 見出し */
.top-workstyle__heading {
  margin-bottom: 40px;
}

/* WORKSTYLE
   design-spec: fontSize=72.3px (Bodoni Moda Italic SemiBold), color=#231815
   1280基準: 48px
*/
.top-workstyle__title-en {
  font-family: var(--en-font);
  font-size: 48px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  line-height: calc(76.6 / 72.3);
  color: #231815;
  display: block;
}

/* AND を 26.3px に縮小（design-spec: ANDCAREER fontSize=26.3px） */
.top-workstyle__title-en .and {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
}

/* pWorkstyleCareerList 準拠 ========================================
   モバイル: 縦積み、カテゴリ色背景
   デスクトップ: 3項目グリッド。全カード写真ありで高さを揃える
   cHoverShutter ホバーエフェクト + カテゴリ別シャッター色
   ============================================================ */

/* --- カスタムプロパティ：カテゴリ色 --- */
:root {
  --crosstalk: #dee9ed;
  --crosstalk-dark: #c2d0d1;
  --workstyle-color: #d3d5e5;
  --workstyle-dark: #b9bdd5;
  --careerdesign: #bfcfe2;
  --careerdesign-dark: #a4b5c9;
  --environment: #e3e3d4;
  --environment-dark: #ccccb5;
  --education: #ede2df;
  --education-dark: #ddc8c2;
}

/* --- モバイルファースト: 縦積み --- */
.top-workstyle__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: calc(35rem / 16);
}

/* リンク：背景色 = currentcolor */
.top-workstyle__link {
  display: grid;
  grid-template-rows: auto auto;
  text-decoration: none;
  background-color: currentcolor;
}

.top-workstyle__link--crosstalk { color: var(--crosstalk); }
.top-workstyle__link--workstyle { color: var(--workstyle-color); }
.top-workstyle__link--careerdesign { color: var(--careerdesign); }
.top-workstyle__link--environment { color: var(--environment); }
.top-workstyle__link--education { color: var(--education); }

/* コンテンツエリア */
.top-workstyle__link-content {
  padding: calc(13rem / 16) 14px calc(13rem / 16) 13px;
}

/* インデックス（番号 + テキスト） */
.top-workstyle__index {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #000;
}

.top-workstyle__index-num {
  position: relative;
  padding-right: 7px;
  font-family: var(--en-font-sans);
  font-size: calc(16rem / 16);
  font-weight: 600;
  color: #000;
}

.top-workstyle__index-num::after {
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  width: 1px;
  height: 16px;
  content: "";
  background-color: currentcolor;
}

.top-workstyle__index-text {
  font-family: var(--en-font-sans);
  font-size: calc(13rem / 16);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #000;
}

/* 見出し */
.top-workstyle__link-headline {
  font-family: var(--jp-font);
  font-size: calc(24rem / 16);
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.05em;
  color: #000;
  margin-top: calc(4rem / 16);
}

.top-workstyle__link-headline--noimage {
  margin-top: calc(4rem / 16);
  margin-bottom: calc(11rem / 16);
  font-size: calc(23rem / 16);
}

/* cViewMore */
.top-workstyle__link .cViewMore {
  margin: calc(8rem / 16) 0 0 auto;
  color: #000;
}

/* 画像エリア */
.top-workstyle__image {
  width: 100%;
  aspect-ratio: 800 / 533;
  overflow: hidden;
}

.top-workstyle__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.24s var(--ease-out);
}

.top-workstyle__link:hover .top-workstyle__image img {
  transform: scale(1.06);
}

/* --- cHoverShutter 用シャッター色 --- */
.top-workstyle__link--crosstalk { --shutter-color: var(--crosstalk-dark); }
.top-workstyle__link--workstyle { --shutter-color: var(--workstyle-dark); }
.top-workstyle__link--careerdesign { --shutter-color: var(--careerdesign-dark); }
.top-workstyle__link--environment { --shutter-color: var(--environment-dark); }
.top-workstyle__link--education { --shutter-color: var(--education-dark); }

/* --- デスクトップ: 3列グリッド --- */
@media (min-width: 768px) {
  .top-workstyle__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 3.51vw;
    align-items: stretch;
  }

  .top-workstyle__item {
    min-width: 0;
  }

  .top-workstyle__link {
    position: relative;
    z-index: 1;
    height: 100%;
    grid-template-rows: auto 1fr;
  }

  /* コンテンツエリア（デスクトップ） */
  .top-workstyle__link-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(190px, 18vw, 240px);
    padding: calc(19rem / 16) 20px calc(28rem / 16);
  }

  /* インデックス: 縦書き + 左端配置 */
  .top-workstyle__index {
    position: absolute;
    top: calc(13rem / 16);
    left: 16px;
    flex-direction: column;
    gap: calc(9rem / 16);
  }

  .top-workstyle__index-num {
    padding-right: 0;
    padding-bottom: calc(2rem / 16);
  }

  .top-workstyle__index-num::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 16px;
    height: 1px;
  }

  .top-workstyle__index-text {
    writing-mode: vertical-rl;
  }

  /* 見出し */
  .top-workstyle__link-headline {
    padding-left: 42px;
    font-size: clamp(calc(22rem / 16), 1.8vw, calc(26rem / 16));
    line-height: 1.29;
  }

  .top-workstyle__link-headline--noimage {
    padding-left: 0;
    font-size: clamp(calc(26rem / 16), 2.27vw, calc(31rem / 16));
  }

  /* cViewMore */
  .top-workstyle__link .cViewMore {
    margin: calc(8rem / 16) auto 0 0;
  }

  /* 画像エリア */
  .top-workstyle__image {
    height: auto;
  }

  .top-workstyle__image img {
    height: 100%;
  }

  /* ホバー時のシャッター速度調整 */
  .top-workstyle__link:hover::after {
    transition: transform 0.72s var(--ease-out);
  }
}


/* ============================================================
   10. Responsive — Mobile（< 768px）
   ============================================================ */
@media (max-width: 768px) {
  /* MV */
  .mv {
    min-height: 600px;
  }

  .mv__content {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }

  .mv__teaser-btn {
    font-size: 12px;
    padding: 10px 12px;
    min-height: 80px;
  }

  .mv__logo {
    margin-bottom: 24px;
  }

  .mv__logo-company {
    font-size: 13px;
  }

  .mv__logo-sub {
    font-size: 10px;
  }

  .mv__catch {
    font-size: 18px;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
  }

  .mv__lead {
    font-size: 13px;
    margin-bottom: 32px;
  }

  .mv__entry-link {
    font-size: 16px;
  }

  /* ニュースバー */
  .news-bar {
    padding: 10px 16px;
    min-width: auto;
    width: 100%;
    gap: 12px;
  }

  .news-bar__date,
  .news-bar__text {
    font-size: 12px;
  }

  /* MESSAGE */
  .top-message {
    padding: 48px 24px 48px;
  }

  .top-message__heading {
    font-size: 20px;
    margin-bottom: 28px;
  }

  .top-message__body {
    font-size: 13px;
  }

  /* VIDEO */
  .top-video {
    padding: 40px 24px 48px;
  }

  /* ABOUT */
  .top-about {
    padding: 48px 0 60px;
  }

  .top-about__inner {
    padding: 0 24px;
  }

  .top-about__headline {
    font-size: 36px;
  }

  .top-about__link_headline_main {
    font-size: 18px;
  }

  .top-about__photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .top-about__photo--1 { margin-top: 0; }
  .top-about__photo--2 { margin-top: 40px; }
  .top-about__photo--3 { margin-top: 6px; }
  .top-about__photo--4 { margin-top: 36px; }

  /* PERSON */
  .top-person__inner {
    padding: 0 16px;
  }

  .top-person__title-en {
    font-size: 36px;
  }

  .top-person__title-ja {
    font-size: 16px;
  }

  .top-person__grid-top {
    grid-template-columns: 1fr;
    margin-left: -16px;
    margin-right: -16px;
  }

  .top-person__grid-bottom {
    grid-template-columns: 1fr;
    margin-left: -16px;
    margin-right: -16px;
  }

  .person-card__number {
    font-size: 36px;
  }

  /* WORKSTYLE */
  .top-workstyle__inner {
    padding: 0 16px;
  }

  .top-workstyle__title-en {
    font-size: 36px;
  }

  .top-workstyle__image {
    height: 56vw;
  }

}

/* ============================================================
   11. Responsive — Tablet（768px〜1023px）
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .mv__content {
    padding-left: 48px;
  }

  .mv__catch {
    font-size: 20px;
  }

  .mv__lead {
    font-size: 13px;
  }

  /* ABOUT */
  .top-about__photo--2 { margin-top: 72px; }
  .top-about__photo--3 { margin-top: 6px; }
  .top-about__photo--4 { margin-top: 64px; }

  /* PERSON */
  .top-person__inner {
    padding: 0 48px;
  }

  .top-person__grid-top {
    margin-left: -48px;
    margin-right: -48px;
  }

  .top-person__grid-bottom {
    margin-left: -48px;
    margin-right: -48px;
  }

  .person-card__number {
    font-size: 36px;
  }

  /* WORKSTYLE */
  .top-workstyle__inner {
    padding: 0 48px;
  }

}

/* ============================================================
   12. PC幅 1024px〜1280px 調整
   ============================================================ */

/* ============================================================
   13. 大画面 1280px超 — コンテナが固定されて左右余白が生まれる
   ============================================================ */
@media (min-width: 1281px) {
  /* コンテナがmax-width: 1280pxで頭打ちになる
     グリッドは左右のpaddingを打ち消して広がる */
  .top-person__grid-top,
  .top-person__grid-bottom {
    margin-left: -97px;
    margin-right: -97px;
  }
}