/* ==========================================================================
   career.css - 自社採用ページ専用スタイル
   ========================================================================== */

/* 1. ファーストビュー (FV) */
.career-fv {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 600px;
  background-color: #000;
  overflow: hidden;
  display: flex;
}

.career-fv-left {
  position: relative;
  width: 15%;
  min-width: 120px;
  height: 100%;
  background-color: var(--color-primary);
  display: flex;
  align-items: flex-start; /* 上寄せに変更 */
  justify-content: center;
  padding-top: 5vh; /* 上からの余白 */
  z-index: 3;
  /* 右からスライドインするアニメーション */
  transform: translateX(100vw);
  animation: fvSlideInFromRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fvSlideInFromRight {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}

.career-fv-left-text {
  position: absolute;
  top: 10vh; /* 18vhから元の10vhに戻しました */
  left: -0.5vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(130, 0, 0, 0.4);
  /* 赤帯の高さは 100vh - ヘッダー で画面の高さに追従するのに、
     文字だけ固定pxだと高さによってはみ出したり余ったりする。
     実測: 1200px高で180px余り、790px高で189pxはみ出していた。
     7文字ぶんの送りが帯に収まるよう、画面の高さに追従させる。 */
  font-size: clamp(5rem, 13.5vh, 11rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 0.8; /* 縦書き時の横幅（行間）を詰めて余白を削る */
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  margin: 0;
  user-select: none;
  /* 縦書き（vertical-rl）では英字が90度回転している。
     画面の横方向＝文字の背の高さ、画面の縦方向＝文字の太さになる。
     つまり scaleX を上げると「文字が縦長」になる（横に太るのではない）。
     もとの scaleX(1.5) scaleY(0.85) は縦長にする指定だったが、
     1.5倍は効かせすぎて字形が崩れていたため 1.15 に抑える。 */
  transform: scaleX(1.25);
  transform-origin: top left;
  /* アニメーションでふわっと表示 */
  opacity: 0;
  animation: fvFadeInText 1s ease forwards 0.8s;
}

@keyframes fvFadeInText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.career-fv-right {
  position: relative;
  width: 85%;
  flex-grow: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.career-fv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111;
  background-image: url('../image/05-careers/header.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  filter: grayscale(100%) contrast(120%);
  z-index: 1;
}

.career-fv-content {
  position: absolute;
  bottom: 3%; /* 位置をさらに下に下げる */
  left: -6vw; /* さらに少し右へ戻す */
  z-index: 10;
  text-align: left;
}

.career-fv-title {
  color: #fff;
  font-size: 10.5rem; /* 12remから一つ前の10.5remに戻しました */
  font-weight: 700; /* サイト基準の見出し700に統一（900は数字と英字のあしらいのみ） */
  line-height: 1.1;
  letter-spacing: -0.05em; /* 文字間を詰める */
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  font-family: 'Noto Sans JP', sans-serif; /* Noto Sans JP Black相当 */
  margin: 0;
}

@media (max-width: 768px) {
  .career-fv {
    flex-direction: column;
  }
  .career-fv-left {
    width: 100%;
    height: 60px;
    min-height: auto;
    padding-top: 0;
    align-items: center;
  }
  .career-fv-left-text {
    position: static;
    writing-mode: horizontal-tb;
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    transform: none; /* Reset transform for mobile */
  }
  .career-fv-right {
    width: 100%;
    padding: 0;
    justify-content: center;
  }
  .career-fv-content {
    position: relative;
    bottom: auto;
    left: auto;
    text-align: center;
    padding: 40px 20px;
  }
  .career-fv-title {
    font-size: 5.5rem; /* スマホ版も一つ前へ戻す */
    text-align: center;
  }
}

/* 2. myteamsはこんな会社です (About) */
.career-about {
  position: relative;
  background-color: #fafafa;
  overflow: hidden;
  padding: 100px 0;
}

.career-about .container {
  position: relative;
  z-index: 1;
}

/* 3Dフリップアニメーション用のコンテナ */
.career-about-content {
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1200px; /* 3D空間の奥行き */
}/* タイトルをカード内に移動したためのマージン調整 */
.career-about .c-section-header {
  margin-bottom: 50px;
}
.career-about .c-section-header__en {
  color: var(--color-primary) !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-family: 'Inter', sans-serif;
  display: block;
  margin-bottom: 10px;
}
.career-about .c-section-header__ja {
  font-size: 2.2rem;
  font-weight: 700;
  color: #111;
  margin: 0;
}.career-about-lead {
  font-size: 2.6rem; /* 2remから大きくしてインパクトを強化 */
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: #111;
  letter-spacing: -0.02em; /* 文字間隔を狭くして塊感を出す */
}

.career-about-lead .highlight {
  color: var(--color-primary);
  /* より洗練されたアンダーライン */
  background: linear-gradient(transparent 75%, rgba(227, 0, 27, 0.15) 75%);
}@media (max-width: 768px) {
  .career-about {
    padding: 60px 0;
  }
  .career-about-content {
    padding: 40px 25px;
  }
  .career-about .c-section-header {
    margin-bottom: 40px;
  }
  .career-about .c-section-header__ja {
    font-size: 1.8rem;
  }.career-about-lead {
    font-size: 2rem; /* 1.6remから大きく */
    text-align: center;
  }}

/* 3. 代表メッセージ (Message) */
.career-message {
  padding: 120px 0; /* 余白を大きくしてゆったりと */
  background-color: #fff; /* 写真がグレーなので背景は白に */
  position: relative;
}@media (max-width: 768px) {}.career-message-body p {
  /* 本文の基準16px（旧1.05rem=16.8px） */
  font-size: 1rem;
  line-height: 2.2;
  margin-bottom: 20px;
  color: #444;
}
.career-message-body strong {
  font-weight: 700;
}/* 4. 働く人について (Worker Data) */
.career-worker {
  padding: 100px 0;
  background-color: #fafafa;
}
.worker-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 50px;
}
.worker-chart-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 40px 30px; /* 少しパディングを調整 */
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.worker-chart-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.worker-chart-title-pill {
  background-color: #111;
  color: #fff;
  border-radius: 50px;
  padding: 10px 0;
  font-size: 1.1rem;
  font-weight: 700;
  width: 90%;
  max-width: 200px;
  margin: 0 auto 40px;
}

/* 性別用 アイコングリッド */
.worker-gender-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}
.gender-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gender-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.gender-item.male .gender-icon,
/* CSSは male=赤 / female=#333 だったが、HTML側のインライン指定で
   逆（male=#333 / female=赤）に上書きされていた。表示されていたのは後者。
   インラインを外すにあたり、実際の表示に合わせてCSSを直す。 */
.gender-item.male .gender-icon,
.gender-item.male .gender-number {
  color: #333;
}
.gender-item.female .gender-icon,
.gender-item.female .gender-number {
  color: var(--color-primary);
}
.gender-number {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -0.05em;
}
.gender-number span {
  font-size: 1.4rem;
  margin-left: 2px;
}
.gender-label {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}/* 5. 数字で見るmyteams (Numbers Grid) */
.career-numbers {
  padding: 80px 0;
  background-color: var(--color-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* 背景の幾何学模様風 */
.career-numbers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 1px, transparent 1px),
                    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
}
.career-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2列から3列へ変更 */
  gap: 20px;
  max-width: 1200px; /* 3列が入るように幅を広くする */
  margin: 50px auto 0;
  position: relative;
  z-index: 2;
}
.number-box {
  background-color: #fff;
  color: #111;
  padding: 20px 35px; /* 上下の余白を30pxから20pxに狭くする */
  text-align: left;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 120px; /* パディング縮小に合わせて最小高さも縮小 */
}
.number-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.number-box-content {
  flex: 1;
  z-index: 2;
  min-width: 0; /* フレックスアイテムがテキスト幅で拡張するのを防ぎ、はみ出しを許可する */
}
.number-box-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #555;
  letter-spacing: 0.05em;
}
.number-box-value {
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.05);
}
.number-box-value small {
  font-size: 1.6rem;
  margin-left: 5px;
  font-weight: 700;
  color: #111;
}
.number-icon-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 10px;
}@media (max-width: 768px) {
  .career-numbers-grid {
    grid-template-columns: 1fr;
  }
}

/* 6. 待遇・福利厚生 (Benefits) */
.career-benefits {
  padding: 80px 0;
  background-color: #f4f6f8; /* 画像に近い少し青みがかった薄いグレー */
}.interview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.interview-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
}
.interview-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  background-color: #ccc;
}
.interview-card:hover .interview-img {
  filter: grayscale(0%);
}
.interview-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  width: 100%;
  color: #fff;
}
.interview-role {
  font-size: 0.8rem;
  background: var(--color-primary);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 5px;
}
.interview-catch {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}
.interview-name {
  font-size: 0.85rem;
}

/* 8. 募集要項 (Jobs) */
.career-jobs {
  padding: 80px 0;
  background-color: #f9f9f9;
}@media (max-width: 768px) {}


/* --- MERGED FROM career-v3-polish.css --- */

.career-v3-page {
  background: #f7f7f5;
  color: #171717;
}

.career-v3-page .menu-trigger {
  display: none;
}

/* Fix position: sticky globally broken by body overflow-x: hidden in style_v2.css */
html,
body.career-v3-page {
  overflow-x: clip !important;
}

.career-v3-page .section-padding,
.career-v3-page .career-benefits,
.career-v3-page .career-numbers {
  padding-top: 105px;
  padding-bottom: 105px;
}

.career-v3-page .c-section-header {
  margin-bottom: 48px;
}

.career-v3-page .c-section-header__en {
  display: block;
  margin-bottom: 10px; /* 他ページと統一 */
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; /* 他ページの英字ラベルと統一（15.2px） */
  font-weight: bold; /* 他ページと統一（700） */
  letter-spacing: 0.15em;
}

.career-v3-page .c-section-header__ja {
  font-size: 2.5rem; /* 他ページと統一（40px固定・clamp廃止） */
  line-height: 1.3;
}

/* FVは画面いっぱいに見せる意図だが、ヘッダーの下から始まるため
   100vh のままでは必ずヘッダーの高さぶん下にはみ出す（リード文が切れていた）。
   ヘッダーの高さはパディングで決まり、1300pxを境に 85px / 65px と変わる。
   768px以下は別ルールで既に -68px していたが、PC側が漏れていた。
   svh ではなく vh を使う（LINEアプリ内ブラウザが svh 非対応のため）。 */
.career-v3-page .career-fv {
  height: calc(100vh - 85px);
  min-height: 650px;
}

@media (min-width: 769px) and (max-width: 1300px) {
  .career-v3-page .career-fv {
    height: calc(100vh - 65px);
  }
}

/* 2026-09-03 FVの写真を体育館に差し替えたのに合わせて、加工を弱めた。
   以前（opacity .55 ＋ grayscale100%）だと、差し込む光も床の艶も消えて
   ほぼ真っ黒になり、この写真を選んだ意味が無くなる。実測で確認した。
   .8 なら光の柱は残り、白文字の下地としても十分暗い。
   .9 まで上げると光の部分と白文字が競合し始める。

   なお、この指定が効くのは recruit-coordinator.html だけ。
   career.html は画像を .career-fv-right に直接持たせているため掛からない。 */
.career-v3-page .career-fv-bg {
  opacity: .8;
  /* 基本の .career-fv-bg（このファイルの91行目）にも
     filter: grayscale(100%) contrast(120%) がある。
     ここで指定を消しただけでは、そちらが残って効き続ける。
     none で明示的に打ち消す。 */
  filter: none;
}

.career-v3-page .career-fv-content {
  top: auto;
  bottom: 8%;
  left: 4vw;
}.career-v3-page .career-fv-title {
  max-width: 900px;
  margin: 0 0 16px;
  font-size: clamp(4.5rem, 5vw, 6rem);
  line-height: 1.02;
  letter-spacing: normal;
}.career-v3-page .career-about {
  position: relative;
  background: #f1f0ed;
}

.career-v3-page .career-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/05-careers/Colleagues_posing_for_group_photo.webp');
  background-size: cover;
  background-position: center 25%;
  opacity: 0.08; /* うっすらとした画像 */
  pointer-events: none;
  z-index: 0;
}

.career-v3-page .career-about-content > div {
  border: 1px solid rgba(0, 0, 0, .05);
}

.career-v3-page .career-about-copy {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  line-height: 2 !important;
  letter-spacing: .01em;
}

.career-v3-page .career-message,
.career-v3-page .career-culture,
.career-v3-page .career-worker,
.career-v3-page .career-benefits,
.career-v3-page .career-faq,
.career-v3-page #jobs-v3 {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.career-v3-page .career-about > .container,
.career-v3-page .career-message > .container,
.career-v3-page .career-culture > .container,
.career-v3-page .career-worker > .container,
.career-v3-page .career-benefits > .container,
.career-v3-page .career-faq > .container,
.career-v3-page #jobs-v3 > .container {
  position: relative;
  z-index: 1;
}

.career-v3-page .career-message::before,
.career-v3-page .career-culture::before,
.career-v3-page .career-worker::before,
.career-v3-page .career-benefits::before,
.career-v3-page .career-faq::before,
.career-v3-page #jobs-v3::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 60vw;
  max-width: 800px;
  aspect-ratio: 1;
  background: url('../image/00-common/rogo02.webp') center / contain no-repeat;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

.career-v3-page .career-message::before,
.career-v3-page .career-worker::before,
.career-v3-page #jobs-v3::before {
  right: -15%;
  transform: translateY(-50%) rotate(15deg);
}

.career-v3-page .career-culture::before,
.career-v3-page .career-benefits::before,
.career-v3-page .career-faq::before {
  left: -15%;
  transform: translateY(-50%) rotate(-15deg);
}

.career-v3-page .career-culture {
  background: #f8f8f6;
}@media (min-width: 901px) {}.career-v3-page .worker-charts-grid {
  gap: 22px;
}

.career-v3-page .worker-chart-card {
  border: 1px solid #eceae6;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .045);
}

.career-v3-page .worker-chart-title-pill {
  background: #fcebed;
  color: #c90012;
}

.career-v3-page .career-numbers-grid {
  gap: 18px;
}

.career-v3-page .number-box {
  min-height: 185px;
  padding: 24px 18px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(98, 0, 8, .13);
  justify-content: center;
  gap: 18px;
}

.career-v3-page .number-box-content {
  flex: 0 1 auto;
}

.career-v3-page .number-box-title {
  font-size: .94rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.career-v3-page .number-box-value {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 5px;
  white-space: nowrap;
  font-size: clamp(3rem, 4.2vw, 4rem);
}

.career-v3-page .number-box-value small {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.career-v3-page .number-icon-img {
  width: 72px;
  height: 72px;
  margin-left: 8px;
}

.career-v3-page .allowance-card-content {
  margin: 0;
  line-height: 1.3;
  white-space: normal;
}

.career-v3-page .allowance-primary,
.career-v3-page .transport-value {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.career-v3-page .allowance-primary span,
.career-v3-page .transport-label {
  font-size: .88rem;
  font-weight: 700;
}

.career-v3-page .allowance-primary strong {
  margin-left: 3px;
  color: var(--color-primary);
  font-size: 2rem;
  line-height: 1;
}

.career-v3-page .allowance-primary small {
  margin-left: 2px;
  color: #333;
  font-size: .82rem;
  font-weight: 700;
}

/* 注記なので補足の基準12px（2026-09-01 中村様のご希望） */
.career-v3-page .allowance-note {
  margin-top: 3px;
  color: #888;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.career-v3-page .allowance-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
}

.career-v3-page .allowance-divider span {
  width: 32px;
  height: 1px;
  background: #d5d5d5;
}

.career-v3-page .allowance-divider i {
  color: #999;
  font-size: .68rem;
  font-style: normal;
}

.career-v3-page .transport-value strong {
  color: var(--color-primary);
  font-size: 1.75rem;
  line-height: 1;
}

.career-v3-page .transport-value small {
  margin-left: 4px;
  color: var(--color-primary);
  font-size: .9rem;
  font-weight: 700;
}

.career-v3-page .number-box:last-child .number-icon-img {
  width: 64px;
  height: 64px;
  margin-left: 4px;
}

.career-v3-page .number-box:last-child .allowance-primary span,
.career-v3-page .number-box:last-child .transport-label {
  font-size: 1rem;
}

.career-v3-page .number-box:last-child .allowance-primary strong {
  font-size: 2.4rem;
}

.career-v3-page .number-box:last-child .allowance-primary small {
  font-size: .95rem;
}

.career-v3-page .number-box:last-child .allowance-note {
  font-size: 0.75rem;
}

.career-v3-page .number-box:last-child .transport-value strong {
  font-size: 2.1rem;
}

.career-v3-page .number-box:last-child .transport-value small {
  font-size: 1rem;
}.career-v3-page .career-benefits {
  background: #f1f0ed;
}

.career-v3-page .interview-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
}.career-v3-page .lp-faq-wrapper {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.career-v3-page .lp-faq-item {
  border-radius: 12px;
  overflow: hidden;
}

.career-v3-page #jobs-v3 > .container > div:last-child > div {
  border: 1px solid #eceae6;
  border-radius: 16px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .055) !important;
}@media (max-width: 900px) {.career-v3-page .interview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .career-v3-page .section-padding,
.career-v3-page .career-benefits,
.career-v3-page .career-numbers {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .career-v3-page .interview-grid{
    grid-template-columns: 1fr;
  }}

.career-v3-page .benefit-item { border-top: 3px solid #333; transition: border-color 0.3s ease; }
.career-v3-page .benefit-item:hover { border-top: 3px solid var(--color-primary); }/* ========================================================================
   Mobile polish (career only)
   Keep every desktop declaration above unchanged.
   ======================================================================== */
@media (max-width: 768px) {
  .career-v3-page .section-padding,
  .career-v3-page .career-benefits,
  .career-v3-page .career-numbers {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .career-v3-page .c-section-header {
    margin-bottom: 30px;
  }

  .career-v3-page .c-section-header__ja {
    font-size: 1.35rem;
  }

  /* Hero */
  .career-v3-page .career-fv {
    height: calc(100svh - 68px);
    min-height: 640px;
    max-height: 780px;
  }

  .career-v3-page .career-fv-left {
    height: 42px;
    flex: 0 0 42px;
  }

  .career-v3-page .career-fv-left-text {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .22em;
  }

  /* 背景の切り出し位置。2026-09-20 に人物写真から「壁の奥に光と街並み」の画像へ
     差し替え（中村様の依頼：人ではなく、recruit-coordinatorのようにかっこよく）。
     見せ場の光が画像の右8割あたりにあるため、45%のままだと暗い壁しか映らなかった。
     85%で光と街並みが右寄りに入る。360pxで確認。recruit-coordinatorは画像を
     子の .career-fv-bg に持たせているため、この指定は career.html にしか効かない。 */
  .career-v3-page .career-fv-right {
    min-height: 0;
    flex: 1 1 auto;
    background-position: 85% center !important;
  }

  .career-v3-page .career-fv-right > div:not(.career-fv-bg):not(.career-fv-content) {
    width: 100% !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, .78)) !important;
  }

  .career-v3-page .career-fv-content {
    position: absolute;
    inset: auto 0 7%;
    width: 100%;
    padding: 24px 20px;
    text-align: left;
  }

  .career-v3-page .career-fv-title {
    width: 100%;
    max-width: none;
    gap: 7px !important;
    margin-bottom: 20px !important;
    text-align: left;
  }

  .career-v3-page .career-fv-title > span:nth-child(1) {
    font-size: .98rem !important;
  }

  .career-v3-page .career-fv-title > span:nth-child(n+2) {
    margin-block: 0 !important;
    font-size: clamp(2rem, 10.2vw, 2.55rem) !important;
    line-height: 1.25;
    letter-spacing: .01em;
  }

  .career-v3-page .career-fv-lead {
    margin-top: 18px !important;
    font-size: .94rem !important;
    line-height: 1.75 !important;
  }

  .career-v3-page .career-fv-lead > span {
    display: block;
    margin-top: 8px;
    font-size: .72rem !important;
  }

  /* About and message */
  .career-v3-page .career-about-content {
    padding: 0;
  }

  .career-v3-page .career-about-content > div {
    width: 100%;
    border-radius: 14px !important;
  }

  .career-v3-page .career-about-content > div > div:first-child {
    padding: 36px 22px 28px !important;
  }

  .career-v3-page .career-about-lead {
    margin-bottom: 28px !important;
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
  }

  .career-v3-page .career-about-copy {
    font-size: .94rem !important;
    line-height: 1.9 !important;
  }

  .career-v3-page .career-about-content > div > div:last-child {
    min-height: 210px !important;
    aspect-ratio: 4 / 3 !important;
  }

  .career-v3-page .career-message > .container > .c-section-header span {
    font-size: clamp(1.8rem, 9.5vw, 2.3rem) !important;
  }

  .career-v3-page .career-message-grid {
    padding: 10px 0 0;
  }

  .career-v3-page .career-message-text-box {
    padding: 28px 20px;
    margin-bottom: -24px;
    border-radius: 10px;
  }

  .career-v3-page .career-message-text-box > div:nth-child(2) {
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  .career-v3-page .career-message-text-box > div:nth-child(2) > span {
    font-size: 1.6rem !important;
  }

  /* 「株式会社myteams 代表取締役社長」の肩書き行 */
  .career-v3-page .career-message-text-box > div:first-child {
    font-size: 0.85rem !important;
  }

  .career-v3-page .career-message-body {
    font-size: .92rem !important;
  }

  /* 2026-08-31 上の line-height:1.85 は .career-message-body に書かれていたが、
     .career-message-body p 側の line-height:2.2 の方が詳細度で勝つため効いていなかった。
     360px実測：本文16行 × 33.1px = 528px。1.85にすると約85px縮む。 */
  .career-v3-page .career-message-body p {
    /* 360px実測（代表メッセージ全体）：
       2.2/20px→1276px、1.85/16px→1187px、1.7/14px→1134px、1.6/12px→1094px。
       1.7 は日本語本文として詰めすぎない下限として選んだ。 */
    line-height: 1.7;
    margin-bottom: 14px;
  }

  .career-v3-page .career-message-body > p:first-child {
    font-size: 1.1rem !important;
  }

  .career-v3-page .career-message-img-box {
    aspect-ratio: 4 / 3;
    max-width: none;
    width: 100%;
    margin-inline: auto;
  }

  /* 人物が中央に来るよう表示位置を調整 */
  .career-v3-page .career-message-img-box img {
    object-position: 50% 22% !important;
  }

  /* Content density and touch-friendly cards */
  .career-v3-page .career-culture > .container > div:nth-child(2) {
    margin-bottom: 54px !important;
  }

  .career-v3-page .career-culture .scroll-reveal {
    padding-inline: 22px !important;
  }

  /* 2026-08-31 中村様のご指摘「スマホでカルチャーが縦に長すぎる」。
     360px実測での内訳：行動指針カード10枚で2,305px、
     カード上下の余白60px/枚・カード間30px・本文の行間1.8 が積み上がっていた。
     文言は削らず、余白と行間だけを詰める。 */
  .career-v3-page .career-culture .value-card {
    padding: 20px 20px 22px;
  }

  .career-v3-page .career-culture .value-title {
    margin-bottom: 10px;
  }

  .career-v3-page .career-culture .value-text {
    line-height: 1.7;
  }

  .career-v3-page .worker-charts-grid {
    gap: 24px;
  }

  .career-v3-page .worker-chart-card {
    padding: 28px 18px;
  }

  .career-v3-page .career-worker .container > div:last-child {
    padding: 24px 20px !important;
  }

  /* Interview cards become a swipeable row instead of a very long stack. */
  .career-v3-page .career-interview .interview-grid {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--sp-side) * -1);
    padding: 4px var(--sp-side) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sp-side);
    scrollbar-width: none;
  }

  .career-v3-page .career-interview .interview-grid::-webkit-scrollbar {
    display: none;
  }

  .career-v3-page .career-interview .interview-card {
    width: min(78vw, 290px);
    min-width: min(78vw, 290px);
    scroll-snap-align: start;
  }

  .career-v3-page .career-interview .interview-card:hover {
    transform: none;
  }

  .career-v3-page .career-benefits a {
    width: 100%;
    padding: 16px 20px !important;
    font-size: .95rem !important;
  }

  .career-v3-page .career-numbers-grid {
    gap: 14px;
    margin-top: 32px;
  }

  .career-v3-page .number-box {
    min-height: 140px;
    padding: 20px;
  }

  .career-v3-page .number-box-value {
    font-size: clamp(2.7rem, 14vw, 3.3rem);
  }

  .career-v3-page .number-icon-img {
    width: 64px;
    height: 64px;
  }

  .career-v3-page .lp-faq-wrapper {
    margin-top: 30px !important;
  }

  .career-v3-page .lp-faq-q {
    padding: 20px 0;
  }

  .career-v3-page .jobs-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .career-v3-page .jobs-grid > div {
    padding: 26px 20px !important;
  }

  .career-v3-page .jobs-grid h4 {
    font-size: 1.1rem !important;
  }

  .career-v3-page .career-entry h2 {
    margin-bottom: 28px !important;
    font-size: 1.35rem !important;
  }

  .career-v3-page .career-entry .btn-cta-primary {
    width: 100%;
    padding: 17px 20px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 380px) {
  .career-v3-page .career-fv-content {
    padding-inline: 16px;
  }

  .career-v3-page .career-fv-title > span:nth-child(n+2) {
    font-size: 1.9rem !important;
  }
}


/* ==================================================
   モバイル フォントサイズの基準に合わせる
   セクション見出し 21.6px / カード見出し 17.6px / 本文 15px
   ※「覚悟」「仕事ができる」等の大文字は意図的な強調のため対象外
   ================================================== */
@media (max-width: 768px) {
  /* --- セクション見出し 21.6px --- */
  .career-v3-page .c-section-header__ja,
  .career-v3-page .career-about-lead,
  .career-v3-page .career-culture h2,
  .career-v3-page .career-entry h2 {
    font-size: 1.35rem !important;
  }

  /* 代表メッセージの見出しは英字が大きいぶん和文を控えめに。
     太さも700に戻す。上の「大きい表示文字は900を維持」の並びに
     .career-message h2 が入っているが、この見出しはモバイルで17.6pxしかなく
     900だと字が潰れる。.career-fit と同じ整理。 */
  .career-v3-page .career-message .c-section-header__ja {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }

  /* --- カード見出し 17.6px --- */
  .career-v3-page .career-worker h3,
  .career-v3-page .career-interview h3,
  .career-v3-page .career-jobs h3,
  .career-v3-page .career-jobs h4,
  .career-v3-page .interview-catch,
  .career-v3-page .career-culture .scroll-reveal h4 {
    font-size: 1.1rem !important;
  }

  /* --- 本文 15px --- */
  .career-v3-page .career-fv-lead,
  .career-v3-page .career-about-copy p,
  .career-v3-page .career-message-body p,
  .career-v3-page .career-culture > .container > p,
  .career-v3-page .career-culture .scroll-reveal p,
  .career-v3-page .career-worker p,
  .career-v3-page .career-benefits p,
  .career-v3-page .career-jobs p,
  .career-v3-page .career-entry p,
  /* 2026-09-01 同じセレクタが2回書かれており、後の 0.85rem(13.6px) が効いていた。
     1つに集約し、モバイル本文の基準15pxにする。 */
  .career-v3-page .career-faq .lp-faq-a p {
    font-size: 0.9375rem !important;
  }
}

/* FAQ の回答は質問より一段小さく */
@media (max-width: 768px) {
}

/* カルチャーカードの見出し（覚悟／仕事ができる／人間性がいい） */
@media (max-width: 768px) {
  .career-v3-page .career-culture .scroll-reveal h3 {
    font-size: 1.9rem !important;
  }
}

/* ==================================================
   求める人物像の見出しを角丸枠で囲む
   ================================================== */
/* 2026-09-01 もとはHTMLのインライン。
   補足行が 0.45em だったため、親がモバイルで21.6pxに縮むと 9.7px になり、
   補足の基準12pxを大きく下回っていた（中村様のご指摘箇所）。
   親に連動させず、役割ごとの基準値で指定する。 */
.career-culture-persona {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 40px 0;
  line-height: 1.4;
  display: inline-block;
  padding: 32px 48px;
  border: 2px solid #eaeaea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.career-culture-persona .persona-lead {
  display: block;
  margin-bottom: 10px;
  color: #555;
  font-size: 1rem;          /* PC：補足の基準16px */
}
.career-culture-persona .persona-line { display: block; }
.career-culture-persona .persona-line--red  { color: var(--color-primary); }
.career-culture-persona .persona-line--dark { color: #333; }
.career-culture-persona .persona-line--blue { color: #0066cc; }

@media (max-width: 768px) {
  .career-v3-page .career-culture-persona {
    display: block;
    padding: 26px 20px;
    border-radius: 12px;
    margin-bottom: 28px !important;
    line-height: 1.9;
  }
  /* モバイルの補足基準 12px */
  .career-v3-page .career-culture-persona .persona-lead {
    font-size: 0.75rem;
  }
}

/* CULTURE ラベル下の余白をモバイルで詰める */
@media (max-width: 768px) {
  .career-v3-page .career-culture > .container > .c-section-header {
    margin-bottom: 22px !important;
  }
}

/* 英字ラベル（ABOUT US / CULTURE 等）を他ページと同じ 0.72rem に統一
   ※ MESSAGE は意図的に大きい表示見出しのため除外 */
@media (max-width: 768px) {
  .career-v3-page .c-section-header__en {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
  }
}

/* MESSAGE は意図的に大きい表示見出しなので上記の統一から除外 */
@media (max-width: 768px) {
  .career-v3-page .career-message .c-section-header__en {
    font-size: clamp(1.8rem, 9.5vw, 2.3rem) !important;
    letter-spacing: 0.05em !important;
  }
}

/* 【余白ルール】セクション間の余白は、背景色が変わるかどうかで分ける（PC）
   ・色が変わる境界 … 105px + 105px（既定）。色の切り替わり自体が区切りになる
   ・同系色が続く境界 … 70px + 70px。区切りが余白しかないため、210px だと空白帯に見える
   career.html の同系色の境界は次の2箇所（2026-08-27時点）
   　CULTURE(#f9f9fa) → WORKER(#fafafa)  ／  FAQ(#f9f9fa) → JOBS(#f9f9f9) */
.career-v3-page .career-culture.section-padding {
  padding-bottom: 70px;
}
.career-v3-page .career-worker.section-padding {
  padding-top: 70px;
}
.career-v3-page .career-faq.section-padding {
  padding-bottom: 70px;
}
.career-v3-page #jobs-v3.section-padding {
  padding-top: 70px;
}

/* 同系色が続く2箇所の70pxを、モバイルでは他と同じ40pxに戻す。
   PCの余白ルール（上のコメント）は同系色の境界を70px+70pxにしているが、
   モバイルは他のセクションが40px+40pxなので、そのままだと
   ここだけ140pxになって空白帯に見える。
   CULTURE→WORKER だけ直してあり、FAQ→JOBS が漏れていた（2026-08-29に追加）。 */
@media (max-width: 768px) {
  .career-v3-page .career-culture.section-padding {
    padding-bottom: 40px;
  }
  .career-v3-page .career-worker.section-padding {
    padding-top: 40px;
  }
  .career-v3-page .career-faq.section-padding {
    padding-bottom: 40px;
  }
  .career-v3-page #jobs-v3.section-padding {
    padding-top: 40px;
  }
}

/* 運動部出身メンバーの一文をやや細く */
@media (max-width: 768px) {
  .career-v3-page .career-worker p.career-worker-note {
    font-weight: 500 !important;
  }
}

/* モバイルではカード装飾を外して地の文として見せる */
@media (max-width: 768px) {
  .career-v3-page .career-worker .container > div.career-worker-note-box {
    background: transparent !important;
    padding: 4px 0 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* 上記ブロックのテキストはモバイルで左揃え・改行なしの一段落に */
@media (max-width: 768px) {
  .career-v3-page .career-worker .container > div.career-worker-note-box {
    text-align: left !important;
  }
  .career-v3-page .career-worker p.career-worker-note {
    text-align: left !important;
    line-height: 1.9 !important;
  }
}

/* 上の余白を詰め、行の幅も少し抑える */
@media (max-width: 768px) {
  .career-v3-page .career-worker .worker-charts-grid {
    margin-bottom: 22px !important;
  }
  .career-v3-page .career-worker .container > div.career-worker-note-box {
    padding: 0 15px !important;
  }
}

/* 一段落テキストをもう少し小さく */
@media (max-width: 768px) {
  .career-v3-page .career-worker p.career-worker-note {
    font-size: 0.85rem !important;
  }
}

/* 「主な前職」の薄いグレー背景をモバイルでは外す */
@media (max-width: 768px) {
  .career-v3-page .career-worker div.career-worker-prevjob {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

/* 「主な前職」をモバイルで1行に収める */
@media (max-width: 768px) {
  .career-v3-page .career-worker .career-worker-prevjob-wrap {
    align-self: stretch;
  }
  .career-v3-page .career-worker div.career-worker-prevjob {
    font-size: 0.75rem !important;
    margin-top: 10px !important;
    white-space: nowrap;
  }
}

/* WORKER カードの数字をモバイルで一段小さく・3枚で揃える */
@media (max-width: 768px) {
  .career-v3-page .career-worker .gender-number {
    font-size: 34px !important;
  }
  .career-v3-page .career-worker .gender-number span {
    font-size: 14px !important;
  }
  .career-v3-page .career-worker .worker-chart-card > div > div[style*="3rem"] {
    font-size: 34px !important;
  }
  .career-v3-page .career-worker .worker-chart-card small {
    font-size: 17px !important;
  }
  .career-v3-page .career-worker .worker-chart-card > div > div[style*="3rem"] > span {
    font-size: 15px !important;
  }
}

/* WORKER カード内の下余白を3枚で統一（一番詰まっているカードに合わせる） */
@media (max-width: 768px) {
  .career-v3-page .career-worker .worker-chart-card > div:last-child {
    padding-bottom: 0 !important;
  }
}

/* 「100%」と「未経験」の間に少し余白 */
@media (max-width: 768px) {
  .career-v3-page .career-worker .worker-chart-card > div > div[style*="3rem"] > span {
    margin-left: 6px;
  }
}

/* INTERVIEW 見出し下の余白を詰める */
@media (max-width: 768px) {
  .career-v3-page .career-interview .c-section-header {
    margin-bottom: 20px !important;
  }
}

/* インタビューカードの本文を一段小さく */
@media (max-width: 768px) {
  .career-v3-page .career-interview h3.interview-catch {
    font-size: 0.94rem !important;
    line-height: 1.6 !important;
  }
}

/* BY THE NUMBERS の数字を一段小さく（WORKER 34px より一段大きい 40px で階層を維持） */
@media (max-width: 768px) {
  .career-v3-page .career-numbers .number-box-value {
    font-size: 40px !important;
  }
  .career-v3-page .career-numbers .number-box-value small {
    font-size: 15px !important;
  }
  .career-v3-page .career-numbers strong {
    font-size: 30px !important;
  }
}

/* ==================================================
   recruit-coordinator.html モバイル基準
   セクション見出し 21.6px / カード見出し 17.6px / 本文 15px / 補足 12px
   ※ここに並ぶセレクタは recruit-coordinator にしか存在しないセクションのため
     career.html には影響しない
   ================================================== */
@media (max-width: 768px) {
  /* セクション見出し */
  .career-v3-page .career-concept h2,
  .career-v3-page .career-data h2 {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }

  /* カード見出し */
  .career-v3-page .career-job h4,
  .career-v3-page .career-reward h4,
  .career-v3-page .career-flow h4 {
    font-size: 1.1rem !important;
  }

  /* 本文 */
  .career-v3-page .career-concept li,
  .career-v3-page .career-concept p,
  .career-v3-page .career-training p,
  .career-v3-page .career-reward .container > div > p,
  .career-v3-page .career-member p,
  .career-v3-page .career-fit .fit-card-anim li > div > div,
  .career-v3-page .career-req li {
    font-size: 0.94rem !important;
    line-height: 1.7 !important;
  }
}

/* MESSAGE セクションを career.html と同じサイズに揃える */
@media (max-width: 768px) {
  .career-v3-page .career-message .msg-text-anim h2 {
    font-size: clamp(1.8rem, 9.5vw, 2.3rem) !important;
  }
  .career-v3-page .career-message .msg-body h3 {
    font-size: 1.6rem !important;
  }
}

/* POINTS のバッジをモバイルで詰める（縦1列 → 折り返して2列） */
@media (max-width: 768px) {
  .career-v3-page .career-points .container > div {
    gap: 10px;
  }
  /* 2列を固定したため、2つ分の内容幅が枠に収まる必要がある。
     列幅は「その列で一番長い文言」で決まる。
     左列は「青天井のインセンティブ」「中途採用100％未経験」の11字、
     右列は7字。合計18字ぶんが padding と gap を足して枠に入る計算。
     360pxで枠328px、320pxで288px。文字を幅に追従させて両方に収める。 */
  .career-v3-page .career-points .container > div > div {
    padding: 10px 10px !important;
    font-size: min(0.94rem, 4vw) !important;
    border-radius: 8px !important;
  }
}

/* recruit-coordinator の FV 見出し。
   32px だと「体育会系で捧げた熱量を、」が1行に収まらず「、」だけ落ちるため縮小 */
@media (max-width: 768px) {
  .career-v3-page .career-fv .career-fv-title {
    font-size: clamp(1.5rem, 6.8vw, 2rem) !important;
  }
}

/* TRAINING セクション: PC用のインライン幅指定がモバイルで画面外にはみ出すため解除 */
@media (max-width: 768px) {
  /* 見出しを基準サイズに */
  .career-v3-page .career-training h2 {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }
  /* min-width: 350px が 328px の枠を超えていた */
  .career-v3-page .career-training [style*="min-width: 350px"] {
    min-width: 100% !important;
  }
  /* 見出しの width:320px が親(273px)を超えるため戻す。
     2026-08-31 インラインをクラス(.training-title)へ移した際に
     この属性セレクタが一致しなくなり、はみ出しが復活していた。 */
  .career-v3-page .training-title {
    width: auto;
    max-width: 100%;
  }
}

/* TRAINING の画像を中央寄せ（PCは2カラムのため左寄せのまま） */
@media (max-width: 768px) {
  .career-v3-page .career-training [style*="min-width: 250px"] {
    min-width: 100% !important;
  }
  .career-v3-page .career-training [style*="min-width: 250px"] img {
    width: 100% !important; /* 本文幅に合わせる */
    max-width: 100% !important;
    margin-inline: auto !important;
    display: block !important;
  }
}

/* TRAINING のリード文。24px はセクション見出し(21.6px)より大きく階層が逆転していた */
@media (max-width: 768px) {
  .career-v3-page .career-training strong[style*="1.5rem"] {
    font-size: 1rem !important; /* 24px はセクション見出し(21.6px)より大きく階層が逆転していた。
       17.6px だと「100％未経験」の鉤括弧を詰めないと2行に収まらないため 16px に */
  }
}

/* TRAINING 本文中の強調句。本文15.04pxに対し18.4pxで浮いていた。
   下線マーカーと太字で強調は足りるためサイズは本文に揃える */
@media (max-width: 768px) {
  .career-v3-page .career-training strong[style*="1.15rem"] {
    font-size: 0.94rem !important;
  }
}


/* セクション間の余白を圧縮（64+64=128px → 40+40=80px）
   career.html / recruit-coordinator.html 共通 */
@media (max-width: 768px) {
  .career-v3-page .section-padding,
  .career-v3-page .career-benefits,
  .career-v3-page .career-numbers {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* インラインstyleでpaddingを持つ2セクションは !important で上書き */
  .career-v3-page section.career-message,
  .career-v3-page section.career-fit {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* 研修リストの見出しの太さは .training-title の基本定義（700）に集約済み。
   かつてここにあった h4[style*="width: 320px"] 向けの指定は、
   クラス化でセレクタが一致しなくなったうえ内容も重複のため削除した。 */

/* 本文と研修リスト（灰色ボックス）の間隔を広げる */
@media (max-width: 768px) {
  .career-v3-page .career-training [style*="gap: 40px"][style*="margin-bottom: 20px"] {
    margin-bottom: 40px !important;
  }
}


/* 900 の残り：CSS由来のため属性セレクタで拾えなかった分 */
@media (max-width: 768px) {
  .career-v3-page .career-fv-left-text,
  .career-v3-page .flow-step-num,
  /* 大きい数字の中の単位（万円・月収・年収）は数字より軽くする */
  .career-v3-page .career-reward [style*="clamp(3rem, 5vw, 4rem)"] span {
    font-weight: 700 !important;
  }
}

/* 研修リストのボックス内側を詰めて、見出しを1行に収める（268px → 288px） */
@media (max-width: 768px) {
  .career-v3-page .career-training [style*="background: #e8e8e8"] {
    padding: 20px !important;
  }
}

/* CONCEPT: 赤カードと「テレアポ〜」のピルの間隔 80px → 32px */
@media (max-width: 768px) {
  .career-v3-page .career-concept .concept-wrap > div:last-child {
    margin-top: 32px !important;
  }
}

/* WORK: カード内の連番。40px は同じ画面の見出し17.6pxに対して強すぎる */
@media (max-width: 768px) {
  .career-v3-page .work-num {
    font-size: 1.75rem !important;
  }
}

/* WORK カードをコンパクトに。
   内側30px・番号との間隔30pxで、テキスト列が205pxしか取れていなかった */
@media (max-width: 768px) {
  .career-v3-page .work-card-hover {
    padding: 18px !important;
    gap: 14px !important;
  }
  .career-v3-page .work-card-hover h4 {
    margin-bottom: 6px !important;
  }
  .career-v3-page .work-card-hover p {
    line-height: 1.7 !important;
  }
}

/* TRAINING の黒ボックス（学ぶ→やってみる→…）。
   19.2px で3行に折り返し、内側30pxと相まって253pxを占めていた */
@media (max-width: 768px) {
  .career-v3-page .career-training [style*="background: #111"] {
    padding: 18px !important;
    margin-top: 14px !important;
  }
  .career-v3-page .career-training [style*="background: #111"] > div:first-child {
    font-size: 0.94rem !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .career-v3-page .career-training [style*="background: #111"] p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
}

/* REWARD の数値カード。バッジと数字を縦積み（188px）→ 横並びに。
   for-business.html の「導入案件数」カードと同じ考え方 */
/* REWARDカードのPC表示（もとはHTMLのインライン） */
.career-v3-page .reward-card {
  background: #fff;
  border: 3px solid var(--color-primary);
  padding: 40px 30px;
  border-radius: 10px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 15px 30px rgba(220,20,60,0.1);
}
.career-v3-page .reward-badge {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  display: inline-block;
  padding: 5px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.career-v3-page .reward-prefix {
  font-size: 1.5rem;
  color: #555;
}
.career-v3-page .reward-note {
  font-size: 0.9rem;
  color: #888;
  margin-top: 10px;
  font-weight: 700;
}


/* 単位と数字が密着していたので左右に余白を入れる */
@media (max-width: 768px) {
  .career-v3-page .career-reward [style*="clamp(3rem, 5vw, 4rem)"] > span:first-child {
    margin-right: 6px !important;
  }
  .career-v3-page .career-reward [style*="clamp(3rem, 5vw, 4rem)"] > span:last-child {
    margin-left: 6px !important;
  }
}

/* REWARD の月収推移グラフ。
   列幅37pxに対しラベル17.6pxが2行に折り返し、上に伸びて見出しと重なっていた */
@media (max-width: 768px) {
  .career-v3-page .career-reward [style*="padding: 60px 40px"] {
    padding: 24px 16px !important;
  }
  .career-v3-page .career-reward h4 {
    margin-bottom: 28px !important;
  }
  /* 数値ラベルを1行に固定 */
  .career-v3-page .career-reward [style*="bottom: 100%"] {
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }
  .career-v3-page .career-reward [style*="bottom: 100%"] span {
    font-size: 0.68rem !important;
  }
  /* 軸ラベル（入社時・現在） */
  .career-v3-page .career-reward [style*="top: 100%"] {
    white-space: nowrap !important;
    margin-top: 8px !important;
    font-size: 0.72rem !important;
  }
}

/* MEMBER 見出し。「何かに本気で打ち込んだ経験を、」が字間の分だけ4px溢れて
   「を、」が次行に落ちるため、この見出しのみ字間を0に */
@media (max-width: 768px) {
  .career-v3-page .career-member .c-section-header__ja {
    letter-spacing: 0 !important;
  }
}

/* ==================================================
   MESSAGE セクション（recruit-coordinator）
   PCは画像の上にテキストを重ねるレイアウトだが、360pxでは
   キャッチコピーが左に -24px はみ出し、肩書きとも重なっていた。
   モバイルでは重ねを解除して縦並びにする。
   ================================================== */
@media (max-width: 768px) {
  /* 画像を包む行：重ね用の flex-end を解除して縦積みに */
  .career-v3-page .career-message [style*="justify-content: flex-end"] {
    display: block !important;
    margin-bottom: 24px !important;
  }
  /* 重ねを解除して通常フローへ */
  .career-v3-page .career-message .msg-text-container {
    position: static !important;
    width: 100% !important;
    pointer-events: auto !important;
  }
  /* MESSAGE 見出しブロックの下余白 55px → 20px */
  .career-v3-page .career-message .msg-text-container > .msg-text-anim:first-child {
    margin-bottom: 20px !important;
  }
  /* キャッチコピー3行：左のはみ出しを解消 */
  .career-v3-page .career-message .msg-text-container > .msg-text-anim:last-child {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 5px !important;
    margin-bottom: 24px !important;
  }
  /* 画像は本文幅いっぱいに */
  .career-v3-page .career-message [style*="width: 75%"] {
    width: 100% !important;
  }
}

/* MESSAGE の文字サイズを career.html と揃える。
   このページだけ本文18px・肩書き16px・代表メッセージ19px と1〜3px大きかった */
@media (max-width: 768px) {
  /* 本文（3段落 + 赤枠ブロック） */
  .career-v3-page .career-message .msg-body [style*="font-size: 1.1rem"],
  .career-v3-page .career-message .msg-body [style*="font-size: 1.1rem"] p,
  .career-v3-page .career-message .msg-body [style*="border-left: 4px solid"] {
    font-size: 0.94rem !important;
  }
  .career-v3-page .career-message .msg-body [style*="font-size: 1.15rem"] {
    font-size: 0.94rem !important;
  }
  /* 代表メッセージ 19px → 17.6px */
  .career-v3-page .career-message .msg-text-container [style*="font-size: 1.2rem"] {
    font-size: 1.1rem !important;
  }
  /* 肩書き 16px → 13.6px */
  .career-v3-page .career-message .msg-body [style*="font-size: 1rem"] {
    font-size: 0.85rem !important;
  }
  /* ローマ字表記 18px → 14.4px（中村 圭介 26px とのバランス） */
  .career-v3-page .career-message .msg-body span[style*="font-size: 1.1rem"] {
    font-size: 0.9rem !important;
  }
}

/* MESSAGE のキャッチコピーを写真の左下に重ねる（PC版の見せ方をモバイルでも再現）
   写真は左に廊下・中央〜右に人物の構図なので、左下なら顔にかからない */
@media (max-width: 768px) {
  .career-v3-page .career-message [style*="justify-content: flex-end"] {
    position: relative !important;
  }
  .career-v3-page .career-message .msg-text-container > .msg-text-anim:last-child {
    position: absolute !important;
    left: 8px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: 62% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    z-index: 4 !important;
    gap: 4px !important;
  }
  .career-v3-page .career-message .msg-text-container > .msg-text-anim:last-child > div {
    font-size: 0.94rem !important;
    padding: 4px 10px !important;
  }
}

/* ==================================================
   FIT セクション
   ================================================== */
@media (max-width: 768px) {
  /* 見出し 22px/w900 → 他セクションと同じ 21.6px/w700。
     900のまま残していたのは棚卸し時の判断ミス */
  .career-v3-page .career-fit .c-section-header__ja {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  /* 下部の黒カード。17.6 / 20 / 16.8px と3種混在していたため本文基準に統一 */
  .career-v3-page .career-fit .fit-card-anim p,
  .career-v3-page .career-fit .fit-card-anim p span {
    font-size: 0.94rem !important;
  }
  .career-v3-page .career-fit .fit-card-anim {
    padding: 20px !important;
    margin-top: 24px !important;
  }
}

/* FIT 下部カードの行間を詰める（1.8 → 1.7） */
@media (max-width: 768px) {
  .career-v3-page .career-fit .fit-card-anim {
    line-height: 1.7 !important;
  }
  .career-v3-page .career-fit .fit-card-anim p:first-child {
    margin-bottom: 24px !important;
  }
}

/* 赤い強調文（myteamsは〜があります！）の下に余白。
   直下の「年功序列ではなく〜」とは同じ段落内の <br> 区切りで密着していた */
@media (max-width: 768px) {
  .career-v3-page .career-fit .fit-card-anim p:first-child > span {
    display: inline-block !important;
    margin-bottom: 12px !important;
  }
}

/* ==================================================
   DATA セクション
   ラベル上・数字下の縦積みで1枚150px前後、8枚で1652px。
   REWARD と同じくラベル左・数字右の横並びに変更する。
   ================================================== */
@media (max-width: 768px) {
  .career-v3-page .career-data .data-card-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    text-align: left !important;
  }
  /* ラベル（月給・平均月収など） */
  .career-v3-page .career-data .data-card-anim > div:first-child {
    margin-bottom: 0 !important;
    font-size: 0.94rem !important;
    flex: 0 0 auto !important;
  }
  /* 数字 */
  .career-v3-page .career-data .data-card-anim > div:nth-child(2) {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }
  /* 単位 */
  .career-v3-page .career-data .data-card-anim > div:nth-child(2) span {
    font-size: 0.9rem !important;
    margin-left: 4px !important;
  }
  /* 注記（※会社から5km圏内 など）は3つ目の子。折り返して2行目へ */
  .career-v3-page .career-data .data-card-anim {
    flex-wrap: wrap !important;
  }
  .career-v3-page .career-data .data-card-anim > div:nth-child(3) {
    flex: 0 0 100% !important;
    text-align: right !important;
    font-size: 0.72rem !important;
    margin-top: 2px !important;
  }
}

/* FIT のドット装飾（右上・左下の100x100）はモバイルでは非表示。
   360px幅では画面の28%を占め、右上のものは見出しに重なっていた */
@media (max-width: 768px) {
  .career-v3-page .career-fit [style*="background-image: radial-gradient"] {
    display: none !important;
  }
}

/* カードの枠線。DATA 4px / REWARD 3px と不揃いで、
   どちらもサイト方針（強い枠線は使わない）に対して太かったため2pxに統一 */
@media (max-width: 768px) {
  .career-v3-page .career-data .data-card-anim {
    border-width: 2px !important;
  }
  .career-v3-page .reward-card {
    border-width: 2px;
  }
}

/* 「月20時間」の接頭辞「月」に右余白（数字との間隔） */
@media (max-width: 768px) {
  .career-v3-page .career-data .data-card-anim > div:nth-child(2) span:first-child {
    margin-left: 0 !important;
    margin-right: 4px !important;
  }
}

/* 注記「※住宅手当と通勤交通費は〜」16px は補足として大きいため 12.5px に */
@media (max-width: 768px) {
  .career-v3-page .career-data p[style*="margin-top: 30px"] {
    font-size: 0.75rem !important;
    margin-top: 20px !important;
    font-weight: 500 !important;
  }
  /* 募集要項側の同じ注記も揃える */
  .career-v3-page .career-req p[style*="font-size: 0.95rem"] {
    font-size: 0.75rem !important;
  }
}

/* ==================================================
   REQUIREMENTS（募集要項）
   白カードの内側40px + th/td各20px で、テーブルの実描画幅が248px、
   値の列は174pxしかなく「人材コーディネー／ター」と割れていた。
   モバイルでは 項目名を上・値を下の縦積みにして全幅を使う。
   ================================================== */
@media (max-width: 768px) {
  /* カード内側 40px → 16px */
  .career-v3-page .career-req [style*="padding: 40px"] {
    padding: 16px !important;
  }
  .career-v3-page .career-req table {
    font-size: 0.94rem !important;
  }
  .career-v3-page .career-req tr {
    display: block !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
  }
  .career-v3-page .career-req tr:last-child {
    border-bottom: none !important;
  }
  /* 項目名：値の上に置く小さいラベルに */
  .career-v3-page .career-req th {
    display: block !important;
    width: auto !important;
    padding: 0 0 4px !important;
    font-size: 0.75rem !important;
    color: #888 !important;
    border: none !important;
  }
  /* 値：全幅 */
  .career-v3-page .career-req td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.7 !important;
  }
}

/* ==================================================
   FLOW（選考の流れ）
   丸番号60px + 間隔30px でカードが238pxしか取れず、
   1行あたり321〜348pxと縦に伸びていた。
   ================================================== */
@media (max-width: 768px) {
  .career-v3-page .career-flow .flow-row {
    gap: 8px !important;
  }
  .career-v3-page .career-flow .flow-step-num {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }
  .career-v3-page .career-flow .flow-card {
    padding: 16px !important;
  }
  .career-v3-page .career-flow .flow-card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
  }
  .career-v3-page .career-flow .flow-card p {
    line-height: 1.7 !important;
  }
}

/* 募集要項の項目名を拾いやすく。
   12.5px・#888 では控えめすぎたため、左に赤い縦バーを添えて文字も濃くする。
   （代表メッセージの引用ブロックと同じ「左の赤線」の語彙を再利用） */
@media (max-width: 768px) {
  .career-v3-page .career-req th {
    position: relative !important;
    padding: 0 0 6px 10px !important;
    color: #555 !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
  }
  .career-v3-page .career-req th::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 3px;
    height: 13px;
    background: var(--color-primary);
    border-radius: 2px;
  }
}

/* 待遇・福利厚生のリスト。2カラム(138px)では
   「・通勤交通費全額支／給」のように項目名が割れるため1カラムに */
@media (max-width: 768px) {
  .career-v3-page .career-req ul[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ENTRY: 本文とボタン */
@media (max-width: 768px) {
  .career-v3-page .career-entry [style*="font-size: 1.1rem"] {
    font-size: 0.94rem !important;
    line-height: 1.8 !important;
    margin-bottom: 28px !important;
  }
  /* 応募ボタン。328x101px・19.2px は大きすぎるうえ文言が折り返していた */
  .career-v3-page .career-entry a.btn {
    padding: 16px 24px !important;
    font-size: 1rem !important;
  }
  .career-v3-page .career-entry h2 {
    margin-bottom: 28px !important;
  }
}

/* FLOW の縦線。丸番号を60px→40pxに縮めた分、中心が46px→36pxへ移動したので線も合わせる */
@media (max-width: 768px) {
  .career-v3-page .career-flow .flow-line {
    left: 14px !important;
  }
}

/* FLOW の丸番号。PCはホバーで赤くなる作りだが、モバイルにホバーがないため
   グレー(#bbb)のまま一生変化しない。最初から赤で表示する。
   拡大・影はタップ操作の演出なので入れない */
@media (max-width: 768px) {
  .career-v3-page .career-flow .flow-step-num {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
  }
}


/* ==========================================================================
   採用ページの訴求バッジ（2026-08-30）
   ==========================================================================
   もとは inline style の flex-wrap で、幅に入るだけ詰めて折り返していた。
   バッジの幅が文字数で決まる（146〜201px）ため、画面幅が変わるたびに
   並びが変わっていた。PCで4+2、モバイルは375pxで2-2-2・360pxで2-1-2-1。
   折り返しに任せず列数を固定する。幅が変わっても並びは変わらない。 */
.career-points {
  background: #111;
  color: #fff;
}

/* このセクションはバッジ6個だけなので、他のセクションと同じ105pxだと
   黒い空白が広く、バッジが浮いて見える。FVに続く帯として詰める。 */
.career-points.section-padding {
  padding-top: 56px;
  padding-bottom: 56px;
}

.points-grid {
  display: grid;
  /* auto にして文字の長さに合わせる。1fr だと全部が同じ幅になり、
     短い文言が広い箱の中で浮いてしまう。列数だけを固定する。 */
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 15px;
}

.points-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  background: #222;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  /* 箱の中で文字を折り返さない。「青天井のインセンティブ」のような
     長い文言が2行になると、行ごとに高さが変わって並びが崩れる。 */
  white-space: nowrap;
}

/* 枠が1200pxになる画面では6個を一列に並べる。
   19.2px / padding 24px / gap 15px のままだと必要幅1309pxで109px足りない。
   文字・左右の余白・すき間の3つで分担して縮める（必要幅 約1145px）。 */
@media (min-width: 1200px) {
  /* FVのコピーと左端を揃える。
     コピーの左端は「赤帯15% + コピーの左余白」で決まり、実測ではどの幅でも
     画面の19.05%だった。バッジは中央寄せの .container に入っているため
     基準が違い、1585pxで94px・1265pxで193pxずれていた。
     枠を全幅にして、同じ割合の左余白を持たせる。 */
  .career-points .container {
    max-width: none;
    width: 100%;
    padding-left: 19.05%;
    padding-right: 40px;
  }

  .points-grid {
    grid-template-columns: repeat(6, auto);
    gap: 12px;
    justify-content: start;
  }

  .points-item {
    padding: 14px 18px;
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .points-grid {
    grid-template-columns: repeat(2, auto);
  }
}


/* ==========================================================================
   バッジをFVの下部へ重ねる（PCのみ・2026-08-30）
   ==========================================================================
   独立したセクションだと黒い空白の中にバッジだけが浮いて見えた。
   写真の下部に直接重ねる。バッジ自体が #222 の背景と赤いラインを
   持っているので、帯（背景の板）を足す必要はない。

   セクションを負のマージンでFVの上に引き上げる。HTMLの並びは変えない。
   モバイルは対象外（FVが既に1画面ぴったりで、重ねるとはみ出すため）。 */
/* 重ねるのは6個が一列になる1200px以上だけ。それ未満は3列（156px）になり、
   1行(56px)を前提にした引き上げ量では高さが合わずFVからはみ出す。 */
@media (min-width: 1200px) {
  .career-points.section-padding {
    position: relative;
    z-index: 3;
    text-align: left;
    /* バッジ56px + 下の余白40px ぶん引き上げて、FVの下端に重ねる */
    margin-top: -96px;
    padding-top: 0;
    padding-bottom: 40px;
    background: transparent;
  }

  /* FVのコピーが下端まで来ているため、バッジと重ならないよう持ち上げる */
  .career-v3-page .career-fv-content {
    padding-bottom: 96px;
  }
}


/* バッジのセクションの上余白（モバイル）。
   56px のままだと、FV側の下余白76pxと積み上がって132px空く。
   写真の下端が見えている76pxはFV側の意図なので、足すのは最小限にする。
   PCはこの56pxをFVに重ねる位置決めに使っているため触らない。 */
@media (max-width: 768px) {
  .career-points.section-padding {
    padding-top: 24px;
  }
}



/* 大きい数値の中の単位（「万円」「月収」「年収」）は数値より軽くする。
   親の 900 を継承して 19〜24px で 900 になっていた。
   モバイルには同じ指定が既にあったが、PC に無かった。 */
/* インラインの中身（style属性の文字列）を条件にしていたが、
   インラインをクラスへ移したため当たらなくなった。クラスで指定し直す。
   .data-num はHTML側にあった同じ指定を移したもの。 */
.career-v3-page .data-num span,
.career-v3-page .reward-num span,
.career-v3-page [style*="clamp(3rem, 5vw, 4rem)"] span,
.career-v3-page [style*="clamp(2.5rem, 4vw, 3.5rem)"] span {
  font-weight: 700;
}

/* ==================================================
   HTMLに直接書かれていた指定の集約（2026-08-31 / 第1弾）
   career.html と recruit-coordinator.html で
   同じ内容が繰り返されていた8種類・79箇所をここへ移した。
   .career-v3-page の中だけに効かせ、他ページへ漏らさない。
   ================================================== */

/* 赤字の強調 */
.career-v3-page .u-red {
  color: var(--color-primary);
}

/* 行間を詰める（数値まわりの補助文など） */
.career-v3-page .u-lh-14 {
  line-height: 1.4;
}

/* 「月給」「平均月収」など、大きい数値の上に置く見出し */
.career-v3-page .stat-label {
  font-weight: 700;
  font-size: 1rem;
  color: #111;
  margin-bottom: 10px;
}

/* 「万円」など、大きい数値に添える単位 */
.career-v3-page .stat-unit {
  font-size: 1.2rem;
  color: #111;
}

/* チェックリストの1行と、その先頭のアイコン */
.career-v3-page .check-row {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.career-v3-page .check-icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}

/* 「こんな方に向いている」などの項目見出し */
.career-v3-page .point-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
}

/* 募集要項の表の行 */
.career-v3-page .spec-row {
  border-bottom: 1px solid #eee;
}

/* ==================================================
   HTMLに直接書かれていた指定の集約（2026-08-31 / 第2弾）
   career.html と recruit-coordinator.html で繰り返されていた
   12種類・88箇所をここへ移した。
   ================================================== */

/* 段落の下余白（本文が続くとき） */
.career-v3-page .u-mb-15em {
  margin-bottom: 1.5em;
}

/* 小さい単位（「万」など） */
.career-v3-page .u-fs-08 {
  font-size: 0.8rem;
}

/* セクション見出しを中央に置く場合 */
.career-v3-page .c-section-header--center {
  text-align: center;
  margin-bottom: 50px;
}

/* 2026-08-31 見出しの下余白がインラインで 60px / 50px / 40px とばらついていた。
   クラスへ移し、モバイルだけ 32px に揃える（下のメディアクエリ参照）。 */
.career-v3-page .c-section-header--gap-lg { text-align: center; margin-bottom: 60px; }
.career-v3-page .c-section-header--gap-md { text-align: center; margin-bottom: 40px; }

/* REWARDのリード文とカード群（もとはインライン） */
.career-v3-page .reward-lead {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
  line-height: 2;
  font-size: 1.1rem;
}
.career-v3-page .reward-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
}

/* モバイルの詰め。上の定義より後に置かないと詳細度が同じで負ける。 */
@media (max-width: 768px) {
  .career-v3-page .c-section-header--gap-lg,
  .career-v3-page .c-section-header--gap-md,
  .career-v3-page .c-section-header--center {
    margin-bottom: 32px;
  }
  .career-v3-page .reward-lead {
    margin-bottom: 32px;
  }
  .career-v3-page .reward-cards {
    gap: 20px;
    margin-bottom: 32px;
  }
  /* 選考の流れ：4ステップの間が40pxずつあった */
  .career-v3-page .career-flow .flow-row {
    margin-bottom: 24px;
  }
}

/* 価値観カード（言葉と行動を一致させる、など） */
.career-v3-page .value-title {
  /* PCはカード見出しの基準20px。モバイルは下のメディアクエリで17.6pxに戻す */
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}
.career-v3-page .value-text {
  /* PCは本文の基準16px。モバイルは下のメディアクエリで15pxに戻す */
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  position: relative;
  z-index: 1;
}

/* 「数字で見る」の白いカードと、中の大きい数字 */
.career-v3-page .data-card {
  background: #fff;
  border: 4px solid #111;
  border-radius: 10px;
  padding: 30px 15px;
  text-align: center;
}
.career-v3-page .data-num {
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1;
  font-weight: 900;
  color: var(--color-primary);
}

/* 募集要項の表の見出しセル */
.career-v3-page .spec-th {
  padding: 20px;
  font-weight: 700;
  color: #333;
}

/* 仕事内容のカード。連番・見出し・本文 */
.career-v3-page .work-card {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  display: flex;
  gap: 30px;
}
.career-v3-page .work-num-lg {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}
.career-v3-page .work-title {
  /* 22.4px は基準（20px/26px）のどちらでもない中間値だった。カード見出し（大）26pxへ */
  font-size: 1.625rem;
  font-weight: 700;
  margin-bottom: 10px;
}


.career-v3-page .work-text {
  color: #444;
  line-height: 1.8;
}

/* ==================================================
   HTMLに直接書かれていた指定の集約（2026-08-31 / 第3弾）
   ================================================== */

/* 研修リストの1行。見出し・先頭の■・説明文 */
.career-v3-page .training-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 15px;
}
.career-v3-page .training-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111;
  width: 320px;
  flex-shrink: 0;
  margin: 0 20px 10px 0;
}
.career-v3-page .training-mark {
  color: var(--color-primary);
  margin-right: 8px;
}
.career-v3-page .training-text {
  color: #555;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  min-width: 250px;
}

/* ↓ 上の基本定義より後に置くこと（同じ詳細度のため、前だと効かない） */
@media (max-width: 768px) {
  /* 2026-08-31 縦を詰める。項目の区切りは見出しの ■ と余白で足りるため
     点線は出さない。 */
  .career-v3-page .training-row {
    border-bottom: none;
    padding-bottom: 0;
  }
  .career-v3-page .training-title {
    font-size: 1rem;
    margin-bottom: 4px;
  }
  .career-v3-page .training-text {
    font-size: 0.88rem;
    line-height: 1.55;
  }
}

/* 棒グラフの上に置く数値ラベル */
.career-v3-page .chart-label {
  position: absolute;
  bottom: 100%;
  width: 100%;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #fff;
}

/* 募集要項の表のセル */
.career-v3-page .spec-td {
  padding: 20px;
}
.career-v3-page .spec-td-lh {
  padding: 20px;
  line-height: 1.8;
}

/* 選考の流れ */
.career-v3-page .flow-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.career-v3-page .flow-text {
  color: #555;
  line-height: 1.8;
}

/* 価値観カードと、背景の大きい連番 */
.career-v3-page .value-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--color-primary);
}
.career-v3-page .value-num {
  position: absolute;
  top: -15px;
  left: -10px;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(220,20,60,0.12);
  line-height: 1;
  z-index: 0;
}

/* ==================================================
   HTMLに直接書かれていた指定の集約（2026-08-31 / 第4弾）
   ================================================== */

/* 価値観カードの色違い。
   FVの3つのキーワード（覚悟＝赤／仕事ができる＝黒／人間性＝青）に対応する。
   青はブランドカラー外に見えるが、クライアントの意向による意図的なもの。 */
/* 行動指針の3グループ（覚悟＝赤／仕事ができる＝黒／人間性＝青）。
   2026-08-31 もとはHTMLのインラインstyleで、モバイルの余白をCSSから
   詰められなかったためクラスへ移した。値はインラインと同一。 */
.career-v3-page .culture-group {
  margin-bottom: 60px;
}
.career-v3-page .culture-group--last {
  margin-bottom: 0;
}
.career-v3-page .culture-group-head {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(220,20,60,0.1);
}
.career-v3-page .culture-group + .culture-group .culture-group-head {
  margin-top: 80px;
}
.career-v3-page .culture-group-head--dark { border-bottom-color: rgba(51,51,51,0.1); }
.career-v3-page .culture-group-head--blue { border-bottom-color: rgba(0,102,204,0.1); }

.career-v3-page .culture-group-en {
  font-size: 0.95rem;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 10px;
}
.career-v3-page .culture-group-en--dark { color: #333; }
.career-v3-page .culture-group-en--blue { color: #0066cc; }

.career-v3-page .culture-group-ja {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  margin: 0;
}
.career-v3-page .culture-group-ja--dark { color: #333; }
.career-v3-page .culture-group-ja--blue { color: #0066cc; }

.career-v3-page .culture-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.career-v3-page .culture-cards--narrow {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* モバイルの詰め。上のPC定義と詳細度が同じなので、必ずこの位置（後ろ）に置くこと。
   前方の @media に書くと、後から読まれるPC定義に上書きされて効かない。 */
@media (max-width: 768px) {
  /* カード間 30px → 16px */
  .career-v3-page .culture-cards {
    gap: 16px;
  }
  /* グループの間 60px → 32px、見出しの上下 80px/40px → 40px/24px */
  .career-v3-page .culture-group {
    margin-bottom: 32px;
  }
  /* 上の指定は --last より後に読まれるため、最後のグループにも32pxが付いて
     次のWORKERセクションとの空きが112pxになっていた。ここで打ち消す。 */
  .career-v3-page .culture-group--last {
    margin-bottom: 0;
  }
  .career-v3-page .culture-group-head {
    margin-bottom: 24px;
    padding-bottom: 14px;
  }
  .career-v3-page .culture-group + .culture-group .culture-group-head {
    margin-top: 40px;
  }
}

.career-v3-page .value-card--dark {
  border-top-color: #333;
}
.career-v3-page .value-card--blue {
  border-top-color: #0066cc;
}
.career-v3-page .value-num--dark {
  color: rgba(51,51,51,0.08);
}
.career-v3-page .value-num--blue {
  color: rgba(0,102,204,0.08);
}

/* 報酬セクションの大きい数値と単位 */
.career-v3-page .reward-num {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 900;
  color: #111;
  line-height: 1;
}
.career-v3-page .reward-unit {
  font-size: 1.2rem;
  color: #555;
}

/* ↓ 上の .reward-num / .reward-unit より後に置くこと。
   同じ詳細度のため、前に書くと基本定義に上書きされて効かない。 */
/* モバイルは「バッジ＋数字」を1行に収めて縦を詰める。
   2026-08-31 以前は [style*="clamp(3rem, 5vw, 4rem)"] で数字を2.25remにしていたが、
   インラインをクラスへ移した際にセレクタが一致しなくなり4remのままだった。
   そのため数字が横に収まらずバッジが2行目に落ち、
   カードが 88 / 134 / 170px とばらついていた。 */
@media (max-width: 768px) {
  .career-v3-page .reward-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: left;
  }
  .career-v3-page .reward-badge {
    margin-bottom: 0;
    flex: 0 0 auto;
    padding: 4px 12px;
    font-size: 0.8rem;
  }
  .career-v3-page .reward-num {
    font-size: 2.1rem;
    line-height: 1.1;
  }
  /* 数字の前後の「月収／年収」「万円」を同じ大きさに揃える */
  .career-v3-page .reward-prefix,
  .career-v3-page .reward-unit {
    font-size: 0.95rem;
  }
  .career-v3-page .reward-prefix { margin-right: 4px; }
  .career-v3-page .reward-unit { margin-left: 4px; }
  /* 注記は数字の下（右寄せ）へ */
  /* 注記なので補足の基準12px */
  .career-v3-page .reward-note {
    flex: 0 0 100%;
    margin-top: 0;
    font-size: 0.75rem;
    text-align: right;
  }
}

/* ==================================================
   モバイルの文字サイズ（役割ごとの基準に戻す）
   2026-09-01 中村様のご指摘で追加。
   ここはファイル末尾に置くこと。value-num や culture-group-en の
   基本定義がファイル後半にあるため、前に書くと後から読まれる基本定義に負ける。
   ================================================== */
/* モバイルは役割ごとの基準値に戻す（カード見出し17.6px／本文15px）。
   ↑の基本定義より後ろに置くこと。同じ詳細度のため、前に書くと効かない。 */
@media (max-width: 768px) {
  .career-v3-page .value-title { font-size: 1.1rem; }
  .career-v3-page .value-text  { font-size: 0.9375rem; }
  .career-v3-page .work-title  { font-size: 1.1rem; }
  /* 英字ラベル（STARTUP MINDSET 等）は他ページと同じ 0.72rem。
     従来は「.career-culture .scroll-reveal > div:first-child」で指定していたが、
     行動指針カードにも scroll-reveal が付いているため、
     カードの番号「01」まで 80px → 11.5px にしてしまっていた。 */
  .career-v3-page .culture-group-en { font-size: 0.72rem; }
  /* 番号はカード背面の透かし。PCの80pxはモバイルには大きいので縮める */
  .career-v3-page .value-num { font-size: 3rem; }
}

/* ==================================================
   本文の文字サイズ（役割ごとの基準に揃える）
   2026-09-01 中村様の「サイト全体の取り決めを教えてほしい」を受け、
   実測して基準から外れていた箇所を揃えた。
   基準：PC 16px / モバイル 15px（補足は PC 14px / モバイル 12px）
   ここはファイル末尾に置くこと。対象の基本定義がファイル後半にあるため。
   ================================================== */
.career-v3-page .career-about-copy p,
.career-v3-page .career-worker-note-box,
.career-v3-page .career-worker-note-box p,
.career-v3-page .spec-td,
.career-v3-page .spec-td-lh,
.career-v3-page .spec-td-lh p,
.career-v3-page .spec-td-lh li,
.career-v3-page .spec-th,
.career-v3-page .career-worker-note,
.career-v3-page .spec-td-lh div p,
.career-v3-page .jobs-grid p {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .career-v3-page .career-about-copy p,
  .career-v3-page .career-worker-note-box,
  .career-v3-page .career-worker-note-box p,
  .career-v3-page .spec-td,
  .career-v3-page .spec-td-lh,
  .career-v3-page .spec-td-lh p,
  .career-v3-page .spec-td-lh li,
  .career-v3-page .spec-th,
  .career-v3-page .career-worker-note,
  .career-v3-page .spec-td-lh div p,
  .career-v3-page .jobs-grid p {
    font-size: 0.9375rem;
  }
}