@charset "UTF-8";
/* ==========================================================================
   career.scss
   キャリア採用ページ（/career/, /career/interview/）専用スタイル

   [重要] このファイルはSCSSソースです。WordPressが実際に読み込むのは
   コンパイル後の cmn/css/career.css なので、編集は必ずこちらの .scss で行い、
   保存後に下記コマンドでコンパイルしてから career.css を反映してください。

   [推奨] サイトルート（package.jsonがある場所）で一度だけ:
     npm install
   その後、編集のたびに:
     npm run build:css
   （保存のたびに自動ビルドしたい場合は npm run watch:css）

   npm installでチーム全員が同じバージョンのsassを使える状態になるため、
   個々人のグローバル環境（Homebrew版/Volta経由のnpm版など）に依存する
   下記の直接実行より、まずこちらを優先してください。

     sass cmn/scss/career.scss cmn/css/career.css --style=expanded

   命名規則: FLOCSS + BEM（.c- コンポーネント / .p- ページ固有 / .u- ユーティリティ）
   ベース: assets/css/style.css（html{font-size:62.5%} = 1rem/10px, body 1.6rem）を継承
   参照デザイン: Figma実データ（get_design_context / get_metadata による実測値。
   AGC_TOP_260814フレームは幅1600pxだが、本文コンテナ幅1279px実測 ≒ 128rem(1280px)と
   ほぼ一致するため、Figma上のpx値は当サイトのCSS px値に対して1:1として換算している）

   [ルール] 外部フォントの読み込み方式について:
   - すでにコーポレートサイト側（assets/css/style.css）で自前host/@font-face
     されている書体（例: Noto Sans JP）を使う場合は、同じ@font-face定義を
     career.scss側に複製し、同じ方式で読み込むこと（career.cssはstyle.cssを
     読み込まない独立方針のため、流用ではなく複製になる）。
   - このページで新規に使う書体（Playfair Display, Poppins等、既存サイトに
     存在しない書体）はGoogle Fonts @importで読み込んでよい。
   - st-wrapper / st-main のような既存サイト共通クラス（assets/css/style.css
     由来）を流用しないこと。同等のスタイルが必要な場合はp-career-*名前空間で
     複製し、career.css側に定義する（p-career-wrapper / p-career-mainを参照）。

   [ルール] レスポンシブ（PC⇄SP間の連続的な縮小）について:
   - このファイルは元々「PC用の固定rem値」と「768px以下で切り替わるSP用の
     固定rem値」の2状態切り替えのみで、769〜1279px幅（PC基準幅1280pxより
     狭いノートPC・タブレット等）では何も縮小されない空白帯があった。
   - PC値・SP値の両方が実測・calibrationされているプロパティ（font-size /
     padding / gap / margin-top等の単純な数値1つで表せるもの）は、
     clamp(SP値, calc(定数 + 係数vw), PC値) の形でPC基準幅1280px⇔SPブレイク
     ポイント768pxの間を連続fluid化すること（768px以下は引き続き@media
     (max-width:768px)側の値がそのまま効くよう、768px時点の計算結果が
     SP値と一致するよう係数を算出する）。
   - 一方、company__sub-img（写真の重なり配置）やrecruit__step-item（シェブロン
     形状のpadding/clip-path）のように、PC/SPで単なる縮小ではなく配置・形状
     そのものを作り直しているプロパティは、中間値が意味を持たないため
     fluid化せず、従来通り@media (max-width:768px)での切り替えのままにする。

   [SCSS化にあたって]
   - セレクタは "&" を使わず、すべて完全なクラス名で記述（検索・grepしやすくする
     ため）。ネストしているのは各ルール内の @media (max-width:768px) のみで、
     セレクタ自体をネストで組み立てている箇所はない。
   - 元のcareer.cssは「PC定義を先にまとめ、SP用の@mediaは最後に1つの巨大
     ブロックにまとめる」構成だったが、このSCSSでは各コンポーネントのルールの
     直後にそのSP用@mediaを書き、PC/SPを1箇所にまとめて完結させる構成にした。
   - [重要: 詳細度が同じセレクタの記述順について] 一部、同じ詳細度を持つ
     セレクタ同士が存在し、その場合は「後に書いた方が勝つ」というCSSの
     カスケードルールに依存している箇所がある。該当箇所には必ず注意コメントを
     付けてあるので、編集時は記述順を入れ替えないこと。
       - .p-career-job__list > .p-career-job__card は
         .p-career-job__card:nth-child(N) と同じ詳細度(0,2,0)のため、
         必ずnth-childの指定より後ろに書く。
       - .p-career-environment__flex の @media (SP用flex-direction:column) は
         .p-career-environment__flex--reverse と同じ詳細度(0,1,0)のため、
         必ず--reverseの指定より後ろに書く。
   - コンパイル結果がリファクタリング前のcareer.cssと完全に同一の computed style
     になることを、Playwrightで全要素・全ブレイクポイントについて検証済み。
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Poppins:wght@600;700&display=swap");
/* Noto Sans JP: assets/css/style.css（コーポレートサイト共通CSS）にすでにある
   自前hostの@font-face（Google Fonts Early Access時代のfonts.gstatic.com/ea/…
   配信）と同じ方式に合わせたもの。career.cssはstyle.cssを読み込まない独立方針
   のため、同じ@font-faceをここに複製している。
   本文中で実際にNoto Sans JPへfont-weightを明示指定している箇所は400(通常)・
   500(ミディアム)・700(太字)の3つ（600はPoppins側でのみ使用）。500は
   assets/css/style.css側では未使用のウエイトのため、@font-faceもここ
   career.scss（=career.css。/career/配下のみ読み込む独立CSS）にだけ追加して
   いる。これにより500ウエイトが使えるのは/career/配下だけに閉じており、
   他ページのNoto Sans JPの挙動（400/700のみ）には影響しない。
   .p-career-mv__leadにfont-weight:500が指定されているが、Noto Sans JPの
   @font-faceが400/700しか無く、通常の@font-face（可変フォントでない静的
   ウエイト）はブラウザが中間ウエイトを補間しないため、無指定時と同じ
   400相当で描画されて「効かない」ように見えていたのが原因。 */
@font-face {
  src: local("Noto Sans CJK JP"), local("Noto Sans JP"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format("opentype");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
}
@font-face {
  src: local("Noto Sans CJK JP Medium"), local("Noto Sans JP Medium"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
}
@font-face {
  src: local("Noto Sans CJK JP Bold"), local("Noto Sans JP Bold"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format("opentype");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
}
/* --------------------------------------------------------------------
   リセット（キャリアページ完全独立化にともない、従来 assets/css/style.css
   に依存していた html{font-size:62.5%}（1rem=10px基準）等の土台となる
   スタイルをcareer.css側に内包する。コーポレートサイト共通CSSは
   キャリアページでは一切読み込まない。

   [不具合修正] 以前は「.p-career ul」のように要素セレクタと組み合わせていたため、
   詳細度が(0,1,1)となり、各コンポーネントの単一クラス指定（詳細度(0,1,0)、
   例: .p-career-mv__lead { margin-top: 2.4rem; }）よりリセット側が強くなって
   しまい、CSSの記述順に関わらずリセット側のmargin:0/border:0が常に勝って
   しまっていた（p/dl/ul/imgタグを使う要素のmargin-top・borderが軒並み
   効かなくなるバグの原因）。要素セレクタを:where()で包むことで詳細度への
   寄与を0にし、.p-career単体クラスと同じ詳細度(0,1,0)まで下げている。
   これにより後方（各コンポーネント定義）の単一クラス指定が記述順どおりに
   上書きできるようになる。
   -------------------------------------------------------------------- */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  overflow-x: hidden;
}

.p-career *,
.p-career *::before,
.p-career *::after {
  box-sizing: border-box;
}

.p-career :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* h1〜h4, p, dl/dt/dd はブラウザ既定でmarginのみ付与されるため、marginだけ
   リセットする（paddingは既定で0なので、ここで0指定すると各コンポーネント側の
   意図的なpadding指定を詳細度で上書きしてしまうため含めない）。
   （既定のfont-size/font-weightはbold等が付くが、対象要素は各コンポーネント側で
   font-size/font-weightを明示指定しているため上書きされ影響なし。） */
.p-career :where(h1, h2, h3, h4, p, dl, dt, dd) {
  margin: 0;
}

.p-career :where(img) {
  border: 0;
  vertical-align: bottom;
}

.p-career :where(button) {
  font: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.p-career {
  position: relative;
  --career-blue: #0c44f1; /* CTA / エントリーボタン */
  --career-blue-mid: #336ff2; /* 円アイコン・In Numbers背景 */
  --career-blue-light: #86a7f4; /* グラデーション明側（Jobカード見出し等） */
  --career-navy: #001f6b; /* 見出し・ヒーロー文字・フッター背景 */
  --career-gray: #465a64; /* Strengths本文などのグレーテキスト */
  --career-grad-start: #1b4bed; /* 英字見出しグラデーション（濃→淡） */
  --career-grad-end: #0f2b87;
  --career-job-grad-start: #174bf1; /* Jobカードヘッダーグラデーション */
  --career-job-grad-end: #95b2f5;
  --career-numbers-value: #0f43ee; /* In Numbers 数値カラー */
  --career-bg-alt: #f8f8f8; /* セクション背景（薄グレー） */
  --career-bg-entry: #e4ecff; /* Entryセクション背景 */
  --career-serif:
    "Playfair Display", "Times New Roman", "Noto Serif JP", serif; /* 英字セクション見出し */
  --career-numeral:
    "Poppins", "Times New Roman", sans-serif; /* In Numbers 数値 */
  --career-container: 128rem; /* 1280px */
  color: var(--career-navy);
  /* Mac環境では
     Meiryo UIが存在しないためNoto Sans JPへフォールバックするが、Noto Sans
     JP/Noto Sans CJK JPがローカルにインストールされていないと（かつ
     フォールバック先のfonts.gstatic.com/ea/…のURLも生きているか未確認の
     ため）、さらに次点の"Hiragino Kaku Gothic Pro"まで落ちることが判明。
     このHiragino Kaku Gothic ProはmacOSがW3(通常)/W6(太字相当)の2ウエイト
     しか公開しておらず、700はブラウザの疑似太字合成で見た目上「効いて」
     いるだけで、500のような中間ウエイトは合成対象外のため見た目が変わら
     ない。macOSが同じ字形でW0〜W9まで多段ウエイトを公開している"Hiragino
     Sans"ファミリーをHiragino Kaku Gothic Proより手前に追加することで、
     Noto Sans JPが読み込めない場合でも500が実際に効くようにしている。 */
  font-family: "Meiryo UI", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.p-career img {
  max-width: 100%;
  height: auto;
}

/* .p-career-main はコンテンツ側の position:relative + overflow:hidden の
   基点（装飾ブロブ等がはみ出して横スクロールを生まないようにする保険）。
   min-width（PC最小幅を強制する固定フロア）は、ページ全体をfluid clampで
   連続的に縮小する方針のため、769〜1139px幅で縮小を妨げないよう指定していない。 */
.p-career-main {
  position: relative;
  overflow: hidden;
}

/* .p-career__innerは全セクション共通のクラスのため、セクションごとに新しい
   修飾クラスを追加する代わりに、CSS変数 --inner-max-width / --inner-padding-x
   をここでフォールバック付きで参照する形にした。未指定の場合は従来どおり
   var(--career-container)（1280px）とfluid clampのpaddingになるので、
   既存セクションの見た目は一切変わらない。セクション側の幅を変えたい場合は、
   各セクションのラッパー（例: .p-career-strengths）にこの2つのCSS変数を
   定義するだけでよい（CSS変数は子孫要素へ継承されるため、HTML/PHP側の
   マークアップ変更は不要）。 */
.p-career__inner {
  max-width: var(--inner-max-width, var(--career-container));
  margin: 0 auto;
  /* 1280px時4rem/768px時2rem（左右）を補間するfluid clamp（--inner-padding-x
     未指定時のデフォルト）。 */
  padding: 0 var(--inner-padding-x, clamp(2rem, -1rem + 3.9062vw, 4rem));
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-career__inner {
    padding: 0 1.6rem;
  }
}

.p-career a {
  color: inherit;
  text-decoration: none;
}

.p-career .u-sp-only {
  display: none;
}
@media only screen and (max-width: 768px) {
  .p-career .u-sp-only {
    display: inline;
  }
}

/* u-sp-onlyと対になるユーティリティ。u-sp-onlyと違い、非表示側（SP）で
   何かのdisplay値に切り替える必要はなく「消すだけ」でよいため、PC側は
   要素本来のdisplay値のまま何も指定していない（block要素にdisplay:inline
   を強制してしまうような副作用を避けるため）。 */
@media only screen and (max-width: 768px) {
  .p-career .u-pc-only {
    display: none;
  }
}

/* --------------------------------------------------------------------
   共通見出し（英字セリフ + 和文サブ）
   -------------------------------------------------------------------- */
.p-career-secttl {
  margin-bottom: 4.5rem;
}
@media only screen and (max-width: 768px) {
  .p-career-secttl {
    margin-bottom: 1.7rem;
  }
}

.p-career-secttl__en {
  display: block;
  font-family: var(--career-serif);
  /* background-clip: text はグラデーション背景をline-height
     で決まる行ボックスの高さぶんしか描画しないため、行ボックスがPlayfair
     Displayのディセンダー（g/y等が基線より下に伸びる部分）を含めた実際の
     グリフ高さより狭いと、はみ出た部分にグラデーションの色が塗られず
     透明＝見切れて見える（overflow: hiddenによる物理的なクリッピングでは
     ない）。line-heightを広げて行ボックスをディセンダー込みで確保すること
     で解消している。 */
  font-size: 10.4rem;
  line-height: 1.3;
  font-weight: 500;
  background: linear-gradient(180deg, var(--career-grad-start), var(--career-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media only screen and (max-width: 768px) {
  .p-career-secttl__en {
    font-size: 4.8rem;
    line-height: 1;
  }
}

.p-career-secttl__ja {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  color: #001f6b;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .p-career-secttl__ja {
    font-size: 1.4rem;
  }
}

.p-career-secttl--onblue .p-career-secttl__en {
  background: none;
  -webkit-text-fill-color: initial;
  color: #fff;
  font-weight: 600;
}

/* onblue（In Numbers）はグラデーションではなく単色白文字のため、文字
   ごとに再指定した.p-career-secttl__en .p-career-splittext__char側の
   グラデーション+background-clip: textを打ち消し、単色に戻す
   （詳細度0,4,0 > 0,2,0のグラデーション指定なのでこちらが優先される）。 */
.p-career-secttl--onblue .p-career-secttl__en .p-career-splittext__char {
  background: none;
  -webkit-text-fill-color: initial;
  color: #fff;
}

.p-career-secttl--onblue .p-career-secttl__ja {
  color: #fff;
}

.p-career-secttl--center {
  text-align: center;
}

/* セクションタイトル出現アニメーション（共通・8セクション全タイトルに
   同一適用）は、career.js側の
   splitTextForReveal()が実行時に生成する
   .p-career-splittext__word（単語単位、英単語が行途中で割れるのを防ぐ）
   > .p-career-splittext__char-mask（overflow:hiddenで1文字ぶんをマスク）
   > .p-career-splittext__char（実際にtranslateYする文字本体）
   という入れ子構造に対してスタイルを当てる。 */
.p-career-splittext__word {
  display: inline-block;
}

.p-career-splittext__char-mask {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

/* color / -webkit-text-fill-color は継承プロパティなので、ここでinherit
   しておけば和文タイトル(__ja)や.p-career-secttl--onblueの単色テキストは
   問題なくそのまま表示される。
   [不具合修正] letter-spacingも継承プロパティだが、1文字ずつ
   display:inline-blockの別要素（.p-career-splittext__char-mask）に
   分割された状態だと、通常の連続したテキストと違い「文字と文字の間隔」
   という概念が成立しないため、ブラウザによって効き方が不安定（適用され
   なかったり、逆に効きすぎて隣の文字と重なって見えたりする）。
   Interviewの見出し（letter-spacing: -3px指定あり）で「Inの文字が
   詰まって（重なって）見える」不具合の原因と判明したため、継承された
   letter-spacingを常にnormalへ打ち消し、必要な字詰めは
   margin-right（文字の外枠を動かすだけのbox-modelプロパティなので
   ブラウザ差が出ない）で個別に再現する。 */
.p-career-splittext__word,
.p-career-splittext__char-mask,
.p-career-splittext__char {
  color: inherit;
  -webkit-text-fill-color: inherit;
  letter-spacing: normal;
}

/* [不具合修正] .p-career-secttl__enはbackground-clip: text +
   color: transparentのグラデーション文字だが、backgroundは継承プロパティ
   ではないため、文字を.p-career-splittext__wordなどdisplay:inline-blockの
   spanで包むと、__en自身の直下には実質テキストが無くなり（クリップ元の
   グラデーション背景を持つ要素と、実際に文字を描画するleaf要素が別々に
   なってしまう）、文字が透明なまま何もクリップされず完全に非表示になって
   いた（「p-career-secttl__enが表示されていない」不具合の原因）。
   継承ではなく、実際に文字を描画するleaf要素である.p-career-splittext__char
   自身にグラデーション+background-clip: textを再度明示的に指定することで
   解決する。このグラデーションは180deg（縦方向）で文字の左右位置に関係なく
   同じ配色になるため、1文字ずつ独立してクリップしても継ぎ目なく見える。 */
.p-career-secttl__en .p-career-splittext__char {
  background: linear-gradient(180deg, var(--career-grad-start), var(--career-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 文字本体: 初期状態はマスクの下（translateY(110%)）に隠しておき、
   career.js側でIntersectionObserverの交差をきっかけに.is-visibleを
   1文字ずつstaggerして付与する。他の出現演出と同じく、非表示の初期状態
   には明示的にtransition: noneを指定し、.is-visible側にだけ実際の
   transitionを書くことで、is-visible付与前の状態変化でアニメが誤発火
   するのを防いでいる。イージングは他の演出と統一のease-out-quint系
   （cubic-bezier(0.22, 1, 0.36, 1)）。 */
.p-career-splittext__char {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(110%);
  transition: none;
  will-change: opacity, transform;
}

.p-career-splittext__char.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-career-lead {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-top: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .p-career-lead {
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------
   ヘッダー（parts/career-header.php）
   -------------------------------------------------------------------- */
.p-career-header {
  /* デザイン実測により、ヘッダーはMVの背景写真の上に重なる形（背景は透明）
     と判明したため、常に画面上部に固定表示（position: fixed）してMV写真の
     上にオーバーレイする。
     以前はposition: absoluteで配置しておき、career.js側でスクロール量に
     応じて.is-fixedを付け外しし、10pxスクロールした時点でposition: fixed
     に切り替える実装だったが、これだとスクロール開始直後の0〜10pxの間、
     absolute配置のヘッダーが（position:fixedでない通常のスクロール挙動
     として）ページと一緒に少しだけ上へ動いてしまい、10px到達の瞬間に
     position: fixedへ切り替わって画面上部（top:0）へ戻る＝一瞬カクッと
     動いて見える不具合があった（PC実機で確認・報告あり）。
     常時position: fixedにすることでこのジャンプを解消している（見た目は
     スクロール0pxの時点でもposition: fixedとabsoluteで同じ位置に描画
     されるため、静止時の見た目はこれまでと変わらない）。
     career.js側は引き続きスクロール量に応じて.is-fixedを付け外ししており、
     コンパクト化の見た目は.p-career-header__inner側のtransformで実現して
     いる（下記.is-fixed .p-career-header__inner参照）。常時transparentの
     まま追従する。 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* paddingは常に一定（is-fixedでも変えない）。以前はここをtransition
     padding 0.3s easeでアニメーションさせていたが、paddingはレイアウトに
     影響するプロパティのため、変化させるたびブラウザがレイアウトの
     再計算（reflow）を行う必要があり、実機で「追従に切り替わる瞬間に
     カクつく」という報告があった。見た目の「少しコンパクトになる」演出
     自体は.p-career-header__inner側のtransform（translateY）に置き換えて
     いる。transformはレイアウトに影響しない（GPU合成のみで完結する）
     プロパティのため、同じ見た目の変化をレイアウト再計算なしで実現でき、
     カクつきが起きない。 */
  padding: 2rem 0 0;
  background: transparent;
}
@media only screen and (max-width: 1150px) {
  .p-career-header {
    padding: 1.6rem 0 0;
  }
}

.p-career-header__inner {
  max-width: var(--career-container);
  margin: 0 auto;
  /* 1280px時4rem/768px時2rem（左右）を補間するfluid clamp。 */
  padding: 0 3.1rem;
  max-width: 1600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* スクロール追従時（career.js側で.p-career-headerに.is-fixedが付与された
     とき）に、ヘッダーを少しコンパクトに見せる演出。以前は親
     .p-career-header自体のpadding-topを2rem→1.2rem（1150px以下は
     1.6rem→1.2rem）にtransitionさせていたが、layoutプロパティである
     paddingのtransitionはブラウザに毎フレームreflowを発生させ、実機で
     カクつきの原因になっていた。ここではpadding差分と同じ見た目になる
     よう、レイアウトに影響しないtransform: translateYで代替している
     （下記.is-fixed .p-career-header__inner参照）。 */
  transform: translateY(0);
  transition: transform 0.3s ease;
}
@media only screen and (max-width: 1150px) {
  .p-career-header__inner {
    padding: 0 1.6rem;
  }
}

/* .p-career-headerに.is-fixedが付いている間、.p-career-header__innerを
   親のpadding-top差分（2rem→1.2rem＝0.8rem／1150px以下は1.6rem→1.2rem＝
   0.4rem）と同じ距離だけtranslateYで持ち上げ、旧paddingアニメーションと
   同じ見た目のコンパクト化を再現している。 */
.p-career-header.is-fixed .p-career-header__inner {
  transform: translateY(-0.8rem);
}
@media only screen and (max-width: 1150px) {
  .p-career-header.is-fixed .p-career-header__inner {
    transform: translateY(-0.4rem);
  }
}

/* 既存サイトの
   parts/common-header.php と同様に、ロゴをh1（<h1 class="p-career-header__logo">）
   で囲む構成にしたため、.p-careerのリセット（:where(h1,...) { margin:0; }）で
   h1の既定marginは打ち消されている前提。 */
.p-career-header__logo {
  display: block;
  /* 1280px時16rem/768px時11rem（ナビ・ボタンとの取り合い上、SP相当の
     固定値が別途無いため妥当な下限として設定）を補間するfluid clamp。
     768px以下はハンバーガーではなくsp-actionsに切り替わるため無関係になる。 */
  width: 14.5rem;
}
@media only screen and (max-width: 1150px) {
  .p-career-header__logo {
    width: 10rem;
  }
}

.p-career-header__logo img,
.p-career-header__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-header__nav {
  display: flex;
  align-items: center;
  gap: 4rem;
  /* ナビ7項目を横並びで収めたピルの実測上の最小幅（gap clampが下限に
     達した状態）が約1140px（それ未満ではロゴがflex-shrinkで押し潰されて
     幅0になり、ロゴとナビが重なって消える不具合を確認）だったため、
     PC用フルナビ⇔SP表示（INTERVIEW/ENTRYのみの簡易表示）の切り替え
     ブレークポイントを、元の768pxから1150px（実測1140pxに安全マージンを
     加えた値）に引き上げた。他の縦積みコンテンツ（フルード対応済み）とは
     異なり、7項目ナビ+ロゴ+ボタンを1行に収める横並びレイアウトは構造的な
     制約が強く、768px直下まで無理にフルード縮小させるより、1150px以下は
     デザイン上もともと用意されているSP表示に切り替える方が破綻がない。 */
}
@media only screen and (max-width: 1150px) {
  .p-career-header__nav {
    display: none;
  }
}

/* PC専用のナビ（1151px以上でのみ表示、1150px以下はsp-actionsに置き換え）
   だが、1151〜1279px幅ではgap/padding/font-sizeが固定のままだと
   ロゴ・エントリーボタンと衝突して重なって見えてしまっていたため、
   1150px時点を目安とした下限値までfluid clampで縮小するようにした。 */
.p-career-header__nav .p-career-header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, -1.2rem + 3.125vw, 2.8rem);
  font-size: 1.5rem;
  background: #ffffff;
  border-radius: 999px;
  padding: 22px 34px;
  color: #001f6b;
}

.p-career-header__nav .p-career-header__nav-list a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.p-career-header__nav .p-career-header__nav-list a:hover {
  color: #336ff2;
}

.p-career-header__entry {
  display: inline-block;
  background: var(--career-blue);
  font-weight: 700;
  font-size: 1.6rem;
  padding: 8px 20px;
  border-radius: 0.5rem;
  white-space: nowrap;
  font-family: var(--career-numeral); /* ENTRY表記をPoppinsに */
}

.p-career-header__sp-actions {
  display: none;
  align-items: center;
  gap: 1.6rem;
  /* PC用フルナビとの切り替えブレークポイント(1150px)に合わせて同期
     （詳細は.p-career-header__navのコメント参照）。 */
}
@media only screen and (max-width: 1150px) {
  .p-career-header__sp-actions {
    display: flex;
  }
}

.p-career-header__sp-interview {
  font-size: 1.5rem;
  font-weight: 400;
  white-space: nowrap;
  font-family: var(--career-numeral);
}

.p-career-header__sp-entry {
  display: inline-block;
  background: var(--career-blue);
  font-weight: 700;
  font-size: 1.5rem;
  padding: 0.8rem 2.2rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  font-family: var(--career-numeral); /* ENTRY表記をPoppinsに */
}

/* .p-career a { color: inherit; } (詳細度0,1,1) がヘッダーの各リンク単体
   クラス指定(0,1,0)より強く、色指定が効かなかった（.p-career-entry__btn
   で既に踏んでいた同じ罠）ため、親要素.p-career-headerを含めたセレクタで
   詳細度を上げて確実に指定した色にする。 */
.p-career-header .p-career-header__entry {
  color: #fff;
}

.p-career-header .p-career-header__sp-interview {
  color: var(--career-navy);
}

.p-career-header .p-career-header__sp-entry {
  color: #fff;
}

/* フッターのロゴは別コンポーネント（.p-career-footer 側）だが、元のCSSでは
   ヘッダーロゴのすぐ後ろにまとめて定義されていたため配置を維持。 */
.p-career-footer__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .p-career-footer__logo-svg {
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------
   装飾ブロブ（背景のぼかしたグラデーション円）
   Figma実データ（正確な座標・色）は未取得のため、視覚的な位置・色味の近似。
   position:relativeなセクション側にoverflow:visibleを保ち、はみ出しを
   許容して配置する。
   -------------------------------------------------------------------- */
.p-career-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(4rem);
  opacity: 0.55;
  pointer-events: none;
}

.p-career-blob--blue {
  background: radial-gradient(circle at 30% 30%, #4d7bff, transparent 70%);
}

.p-career-blob--pink {
  background: radial-gradient(circle at 30% 30%, #ff6fb0, transparent 70%);
}

.p-career-blob--purple {
  background: radial-gradient(circle at 30% 30%, #9b6bff, transparent 70%);
}

.p-career-blob--cyan {
  background: radial-gradient(circle at 30% 30%, #4fd2ff, transparent 70%);
}

/* --------------------------------------------------------------------
   MV
   -------------------------------------------------------------------- */
/* デザイン画像（資料/デザイン/MV_pc.jpg, MV_sp.jpg）を実測した結果、
   MVは「全幅の背景写真の上にヘッダーと見出しを重ねて配置する」構成と判明。
   ヘッダーは transparent 化して .p-career-mv の上に重ね、
   .p-career-mv 自体の高さは、下記MVスクロール演出により、写真のアスペクト比
   ではなく常に画面いっぱいのfixed/absoluteに変更している。詳細はそちらの
   コメント参照。 */
/* --------------------------------------------------------------------
   MVスクロール演出（mv1→mv2→mv3のテキスト切り替え）
   -------------------------------------------------------------------- */
/* スクロールに応じて
     mv1（見出し+リード文）→mv2（見出しが上にフェードアウトしていく途中）
     →mv3（本文が1行ずつ順にフェードイン）
   と表示を切り替える演出。スクロール量を確保するスペーサー
   .p-career-mv-pin（height:300vh）の中で、実際に画面に固定表示される
   .p-career-mv をJS（career.js）がスクロール位置に応じて
   position:fixed/absoluteで切り替える「手動sticky」を行っている
   （.p-career-main の overflow:hidden の影響で position:sticky が
   使えないため）。 */
.p-career-mv-pin {
  position: relative;
  /* progress(0〜1)は
     scrollable（=pin.offsetHeight-mv.offsetHeight）に対する割合で決まる
     ため、スペーサーを長く取るほど同じ演出を完了させるのに必要な実際の
     スクロール量が増え、体感速度がゆっくりになる（career.js側の計算式は
     変更不要）。 */
  height: 420vh;
}
@media only screen and (max-width: 768px) {
  .p-career-mv-pin {
    /* SPのみ292lvh（large viewport height）を明示指定。420vh自体は
       ブラウザの実装上すでにlarge viewport（アドレスバー非表示時）基準の
       固定値として扱われるのが一般的だが、.p-career-mv側（下記参照）で
       100lvhを明示指定しているのと基準を完全に一致させるため、こちらも
       明示的にlvhを指定する。ここが.p-career-mvの基準とずれると、
       career.js側のscrollable（=pin.offsetHeight-Math.max(mv.offsetHeight,
       window.innerHeight)）や進行度(progress)の計算に誤差が生まれ、
       ピン解除タイミングのズレ（＝背景画像下端に余白が見える不具合）や、
       見出し/本文の入れ替わり演出のタイミングのズレにつながる。
       420→292に短縮（デザイナー確認用）: この値を短くするほど、同じ
       フェード演出を完了させるのに必要な実際のスクロール量が減り、体感
       速度が速くなる＝Our Strengthsまで早く到達できる。ただし、写真
       （.p-career-mv、aspect-ratio指定で画面より低い）がpin解除された
       あとに残る「画面の高さ－写真の高さ」分の#f8f8f8の余白（すぐ上の
       background-color参照）自体の長さは、このpinの高さを変えても変わら
       ない（余白の長さはwindow.innerHeightとmv.offsetHeightの差で決まる
       ため）。つまり292lvhにしても「写真の直後に隙間なくOur Strengthsが
       来る」わけではなく、「フェード演出＋その後の余白」までの合計スクロール
       量が短くなる、という変化になる。
       292→200にさらに短縮（「MVの演出完了までが長い、もっと早くていい」との
       指摘への対応）: scrollable(=pin.offsetHeight-mv.offsetHeight)が
       約3割減るため、見出し→本文のフェード演出全体を完了させるのに必要な
       実スクロール量も同程度短縮される。career.js側の進行度(progress)の
       計算やdescStart/DESC_ENDなどのタイミング比率は変更していないため、
       演出の「間（ま）」の配分自体は変わらず、演出全体が同じ配分のまま
       速く進む形になる。 */
    height: 200vh;
    height: 200lvh;
    /* .p-career-mv（写真本体）がaspect-ratio指定で画面より低くなる分、
       pin中は画面下側に.p-career-mvが覆っていない領域ができる。そこは
       .p-career-mv-pin自身の背景がそのまま見えるため、ここに#f8f8f8
       （既存の--career-bg-alt、他セクションの薄グレー背景と同じ色）を
       敷いて「何もない白」ではなく意図した余白色に見せている
       （デザイナー確認用）。 */
    background-color: var(--career-bg-alt);
  }
}

.p-career-mv {
  /* 高さはaspect-ratioではなく画面いっぱい（100dvh）に固定。aspect-ratio
     指定だと横幅に対して縦が16:9より短いウィンドウ（一般的なノートPCの
     ブラウザなど）でmv自体の高さが画面の高さより低くなり、固定表示中に
     画像の下が真っ白に見切れてしまっていたため（背景画像はobject-fit:
     coverなので、高さを画面いっぱいに広げても画像自体は破綻しない）。
     デザイン画像 MV_sp.jpg 実測: 375x590キャンバスに対し見出し開始位置
     top16.6% / left6.4%（この比率自体は.p-career-mv__txt側で維持）。 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.p-career-mv.is-pinned {
  position: fixed;
}
@media only screen and (max-width: 768px) {
  .p-career-mv {
    /* SPの「見切れなし・余白なし」の完全な両立は、写真の縦横比(375:590)と
       実機のスマホ画面比率が一致しないため不可能（デザイナー相談中）。
       デザイナー確認用に、まずは「見切れなし」を優先する案（下に余白が
       できるのは許容）で表示する。写真(career_mv_sp.jpg)自体がちょうど
       このキャンバス比率の2倍サイズで書き出されているため、aspect-ratio
       運用でも画像の左右が不要にクロップされることはない（object-fit:
       coverのままで問題ない）。 */
    height: auto;
    aspect-ratio: 375/590;
  }
}

.p-career-mv__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.p-career-mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-career-mv__txt {
  position: absolute;
  z-index: 2;
  /* PC: 見出しボックスは画面幅いっぱい（left/right:0）。実測ベースの左右
     余白指定はSP側のみ（下記メディアクエリ内のコメント参照）。 */
  top: 19%;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 768px) {
  .p-career-mv__txt {
    /* 実測: 見出し左端が写真幅の約6.4%、上端が写真高さの約16.6%、
       右端は人物の顔にかからないよう約94%（写真幅の6%を右側マージン）で確保 */
    top: 16.6%;
    left: 6.4%;
    right: 6%;
  }
}

/* A-OTF A1 Mincho Stdが有償フォントで読み込み手段が無いため、見出しはテキストではなく
   画像（career_mv_ttl_pc.svg / career_mv_ttl_sp.svg）で対応。.p-career-mv__txtが
   写真幅に対する%指定（left/right）で確保している幅いっぱいに画像を追従させることで、
   MVセクション全体（aspect-ratio指定でフルード）と同じ拡大縮小の挙動に揃えている。
   SVGは元データがFigmaエクスポート由来で座標精度が過剰だったため、視覚的な差が
   出ない範囲（小数点1桁）まで座標を丸めてファイルサイズを削減済み
   （PC: 約2.3MB→約1.6MB / gzip後 約466KB→約124KB）。 */
.p-career-mv__ttl {
  display: block;
  /* タイトルSVGが.p-career-mv__txt（写真幅8.5%〜94%）いっぱいだと
     大きすぎたため、72%幅に縮小。 */
  width: 72%;
  max-width: 1153px;
}
@media only screen and (max-width: 768px) {
  .p-career-mv__ttl {
    width: 100%;
  }
}

.p-career-mv__ttl img {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-mv__lead {
  /* 元はmargin-top:2.4rem / font-size:clamp(1.3rem〜1.5rem)のfluid clamp
     だったが、PC/SPどちらでも一律で大きく見せる意図で、margin-top:3.1rem・
     font-size:1.8rem固定にしている（意図的にfluid化を解除）。 */
  margin-top: 3.1rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.2;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-career-mv__lead {
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 1.7rem;
  }
}

/* 見出し+リード文をまとめたラッパー。mv1→mv2でスクロールに応じ
   opacityとtransform（上方向へのドリフト）をcareer.js側から直接
   style指定でアニメーションさせるため、will-changeで先回りしておく
   （career.js側PRIMARY_DRIFT_VH_RATIO、window.innerHeightに対する比率で
   移動距離を決定）。親.p-career-mvのoverflow:hiddenにより、上へ抜けた分は
   ヘッダーへ吸い込まれるように自然にクリップされる。 */
.p-career-mv__txt-primary {
  will-change: opacity, transform;
  width: 100%;
  max-width: 1600px;
  margin: 0px auto;
  padding-left: 103px;
}
@media only screen and (max-width: 768px) {
  .p-career-mv__txt-primary {
    padding-left: 0;
  }
}

/* mv3で表示する本文。.p-career-mv__txt-primaryと同じ位置に絶対配置で
   重ね、見出し+リード文が消えていくのと入れ替わりに出現させる。
   アニメーション対象がこの.p-career-mv__desc自体
   （career.js側でopacity/transformを直接操作）になっているため、
   will-changeもこちらに付与する。 */
.p-career-mv__desc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.4;
  color: var(--career-navy);
  opacity: 0;
  will-change: opacity, transform;
  width: 100%;
  max-width: 1600px;
  margin: 0px auto;
  padding-left: 103px;
  /* 右端の改行位置がガタつく（自然な左揃えの折り返し任せ）との指摘への
     対応。.p-interview-card__aと同じ考え方で、余白（padding/margin）は
     変えず、テキスト自体の揃え方だけを両端揃えにしている。 */
  text-align: justify;
  text-justify: inter-character;
}
@media only screen and (max-width: 768px) {
  .p-career-mv__desc {
    padding: 0;
    font-size: 1.4rem;
    line-height: 2.2;
  }
}

/* --------------------------------------------------------------------
   FV（ファーストビュー）出現アニメーション
   -------------------------------------------------------------------- */
/* タイミング管理はCSSのtransition-delayではなくcareer.js側のJSクラス
   （SlideUpAnimation、setTimeoutでdelay/staggerを管理）で行っている。
   ページ読み込み直後、キャッチコピー（.p-career-mv__ttl 見出し画像）
   →サブコピー（.p-career-mv__lead リード文）→ヘッダー（.p-career-header）
   の順に、前の要素の表示が完全に終わってから次が始まる「完全な順次表示」で
   フェード+スライドインする。ファーストビューは常に画面内にあるため、
   スクロールを待たずcareer.js側でページ読み込み時に自動トリガーする
   （IntersectionObserverは使わない）。
   非表示の初期状態には明示的に transition: none を
   指定し（=このルールでは何があってもアニメーションさせない）、
   .is-visible側にだけ実際のtransitionを書く。こうすることで、
   js-animate-init付与の瞬間（＝要素がまだ完全表示のとき）に
   opacity:1→0への「消えるアニメ」が誤発火するのも防げる。 */
/* キャッチコピーは、サブコピー(2.4rem)よりさらに下（5rem）から始める。 */
.p-career-mv__ttl.js-animate-init {
  opacity: 0;
  transform: translateY(5rem);
  transition: none;
}

.p-career-mv__lead.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-career-header.js-animate-init {
  opacity: 0;
  transform: translateY(-1.6rem);
  transition: none;
}

/* キャッチコピー: 表示開始タイミング（リロード後0.5s）は
   career.js側のSlideUpAnimationがsetTimeoutで管理しており、ここでは
   delayを指定しない（=is-visible付与と同時に即アニメ開始）。 */
.p-career-mv__ttl.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* サブコピー（「お客様第一主義を貫く。」）: 開始タイミングは
   ttl(見出し)の表示完了（delay500ms+duration1.5s=2000ms）を待ってから
   始まるようcareer.js側のdelayを2000msにしている（詳細は
   career.js側の該当コメント参照）。 */
.p-career-mv__lead.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ヘッダー: 開始タイミングは、leadの表示完了
   （delay2000ms+duration1.3s=3300ms）を待ってから始まるようcareer.js側の
   delayを3300msにしている。 */
.p-career-header.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------
   Our Strengths
   -------------------------------------------------------------------- */
.p-career-strengths {
  background: var(--career-bg-alt);
  padding: 6.8rem 0 0;
  position: relative;
  /* 背景画像（.p-career-strengths__bg-img）をz-index:-1で
     本文の後ろに配置するために、このセクション自身に明示的なz-index（0）を
     指定してスタッキングコンテキストを作る。position:relativeだけでは
     コンテキストが生成されず、子要素のz-index:-1がこのセクションの外
     （.p-career-main側）まで突き抜けてしまい、背景色そのものより後ろに
     回り込んで画像が完全に見えなくなる不具合があったため。 */
  z-index: 0;
  /* Our Strengthsはmax-width 921px（左右32px開けて中身の幅857px）指定の
     ため、.p-career__innerのデフォルト（1280px / fluid clamp padding）を
     このセクションだけ上書き。
     921px = 32px（左）+ 857px（中身）+ 32px（右）。 */
  --inner-max-width: 92.1rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-strengths {
    padding: 4rem 0 0;
  }
}

.p-career-strengths .p-career-secttl__en {
  background: linear-gradient(180deg, #1b4bed 0%, #0f2b87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  /* line-height:1（flex-end揃えのデザイン上
     必須、ユーザー指定によりPC/SP共通で維持）はそのままに、ディセンダー
     （g等）欠けだけを別経路で解消する。
     これまでの試行錯誤で判明した点:
     ・見切れの原因はoverflow:hiddenによる物理クリップではなく、
       background-clip: textのグラデーション自体が「line-heightで決まる
       ボックスの高さぶんしか描画されない」ため（327行目の基本ルールの
       コメント参照。site全体で確認済みの仕組み）。
     ・このボックスは.p-career-secttl__en自身ではなく、実際にグラデーション
       ・background-clip: textを持つ末端要素.p-career-splittext__char
       （下記ルール）が基準。ここへpadding-bottomを足すとそのグラデーション
       が描画される領域自体が下に広がり、ディセンダーぶんの色が塗られる
       ようになる（.char-maskはoverflow:hiddenだが、auto-heightで子要素の
       実際の高さに追従するため、paddingで増えた分もクリップされず表示可能）。
     ・ただし.charのpadding-bottomはインライン要素の実レイアウト高さを
       広げる＝このセクションの見出し行自体が0.15emぶん下に伸びてしまう
       ため、align-items: flex-endで揃えている「AGIMの強み」との下端位置が
       デザインよりずれる。これをこの.p-career-secttl__en側の
       margin-bottomの負値（-0.15em）で打ち消し、見た目の下端位置を
       padding無しのline-height:1のときと完全に一致させている
       （半分ずつではなく下だけに足しているぶん、この打ち消し量は
       .charのpadding-bottomと同じ値にする）。 */
  line-height: 1;
  margin-bottom: -0.15em;
}

/* Our Strengthsだけ基本の紺グラデーションではなくこの青グラデーションを
   使うため、文字ごとに再指定した.p-career-splittext__char側にも同じ配色を
   このセクション専用に上書きする（基本ルール.p-career-secttl__en
   .p-career-splittext__charより詳細度が高いので優先される）。 */
.p-career-strengths .p-career-secttl__en .p-career-splittext__char {
  background: linear-gradient(180deg, #1b4bed 0%, #0f2b87 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 上のp-career-secttl__enのコメント参照。
     実際にグラデーションが描画される末端要素であるこのcharにpadding-bottomを
     足し、line-height:1のままディセンダー（g等）ぶんの描画領域を確保する。
     値は基本ルール.p-career-secttl__en（327行目）がline-height 1→1.3へ
     広げた際の増分（0.3em、half-leadingで上下0.15emずつ）のうち、
     ディセンダー側（下側）に必要な0.15emを踏襲。 */
  padding-bottom: 0.15em;
}

/* 上のpadding-bottomは"Our<br>Strengths"の全文字に
   一律で効いてしまうが、ディセンダー（g等）があるのは2行目の"Strengths"
   だけで、1行目の"Our"にはディセンダーが無いため不要（Our側にも余白が
   入り、Our/Strengths間の行間が本来より広がって見える一因になっていた）。
   career.js側のsplitTextForReveal()は<br>で行を分けたうえで、各行の単語を
   .p-career-secttl__enの直接の子として.p-career-splittext__wordで順に
   追加している（構造: word("Our") → <br> → word("Strengths")）ため、
   :first-childで1行目の単語（Our）だけをピンポイントに指定できる。 */
.p-career-strengths .p-career-secttl__en > .p-career-splittext__word:first-child .p-career-splittext__char {
  padding-bottom: 0;
}

/* このセクションだけ、他セクションの.p-career-secttl
   （英文見出しの下に和文タイトルが積み重なる縦積みレイアウト）とは別に、
   横並び+下端揃えに上書きする（PC/SP共通デザイン）。英文見出し内の改行
   （Our<br>Strengths）はビューポート幅で変わる自動折り返しではなく、
   テキスト内容に対する固定の改行なので、page-career.php側に直接<br>を
   入れている（CSS側だけでは実現できないため）。 */
.p-career-strengths .p-career-secttl {
  display: flex;
  align-items: flex-end;
  gap: 4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-strengths .p-career-secttl {
    gap: 0.8rem;
  }
}

.p-career-strengths .p-career-secttl__ja {
  margin-top: 0;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .p-career-strengths .p-career-secttl__ja {
    margin-bottom: 0;
  }
}

/* Strengths/Jobは同じ--career-bg-alt背景色を共有しており、.p-career-mainの
   position:relative+overflow:hiddenが横方向のはみ出しをビューポート端で
   クリップするため、セクションまたぎの縦方向のはみ出しも含め、既存の
   ブロブ運用方針の延長でそのまま配置できる。実測用のFigmaデータは無いため、
   目視調整した近似配置（位置・サイズ）。 */
.p-career-strengths .p-career-strengths__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; height:auto; }（全体
     リセット）のmax-width:100%が、widthの指定値とは別プロパティのため
     詳細度に関係なく常に効いてしまい、コンテナ（ほぼ100vw幅のセクション）
     より大きい意図の値（例: Strengthsは106rem=1060px）を指定しても、
     ビューポートが1060px未満の間はコンテナ幅までむりやり縮小されていた
     （＝実際には「1600pxで固定」になっておらず、ずっと縮み続けていた）。
     max-width: none で打ち消す。この上書き自体が.p-career imgの
     max-width:100%（詳細度0,1,1）に勝つよう、セレクタを親セクションで
     前置して詳細度0,2,0に上げている（Company/Interviewの__bg-imgで
     既に使われていたのと同じ手法）。 */
  max-width: none;
  /* 中身（.p-career__inner）は1600px時点の実寸のまま
     固定、その代わり背景装飾画像はビューポート幅が1600pxを超えた分だけ
     位置・サイズとも比例して拡大していく（＝1600px幅で見た「画像とセクション
     端との関係」を保ったまま、画像全体を写真のように拡大縮小するイメージ）。
     min()/max() + vw のペアで実現: 1600px時点の実測値をVremとして、
     vw係数 K = Vrem × 0.625（＝V(px) ÷ 16。100vw=1600px時点で1vw=16pxの
     ため、KvwがちょうどVremと一致する）を使い、
       - 正の値（内向きオフセット等）: max(Vrem, Kvw)
       - 負の値（はみ出しオフセット）: min(Vrem, Kvw)
     とすることで、1600px以下ではVremのまま変化せず、1600px超では
     ビューポート幅に比例して大きくなる（＝1600pxちょうどの時点でVrem/Kvwが
     一致するよう校正済み）。他の4セクション（Interview/Company/Environment/
     Recruit）の背景画像も同じ仕組み。 */
  left: min(-27rem, -16.875vw);
  bottom: min(-106rem, -66.25vw);
  width: max(106rem, 66.25vw);
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-strengths .p-career-strengths__bg-img {
    width: 36rem;
    left: -13rem;
    bottom: -43rem;
  }
}

/* career_icon_circles_base.png（実測1714x640px）をPythonでピクセル実測したところ、
   3つの輪の中心は画像幅の約18.6% / 50.0% / 81.4%、輪の直径は画像の高さいっぱい
   （＝縦横比を保ったまま幅100%で表示すれば輪の重なり方もそのまま再現される）。
   すべて%基準なのでPC/SPとも同じ構造・同じCSSでそのまま縮小対応できる。
   アイコン単体の実測px幅（154 / 144 / 154、各画像の
   アルファ値>10の範囲をPythonで実測）を、輪画像の全幅1714pxに対する比率に
   換算してwidthに使っている。
   キャプションのfont-sizeは、実際のcareer_strength0X.png内の文字行の高さ
   （実測約32px、1714px基準）を857px基準の画面表示スケール(×0.5)に換算し、
   日本語太字ゴシックの一般的なcap-height比率で逆算した推定値を、既存の
   .item-ttl（clamp 1.4rem〜1.7rem）と整合するレンジに丸めたもの。輪自体が
   ビューポート幅に応じて%で縮小するため、キャプションもvw基準のfluid
   clampで追従させている（768px未満の小さい輪でも文字が大きすぎないよう、
   下限を1remまで下げている）。 */
.p-career-strengths__rings {
  position: relative;
  width: 100%;
}

.p-career-strengths__rings-bg {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-strengths__rings-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-career-strengths__rings-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-strengths__rings-icon-caption {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--career-navy);
  text-align: center;
  white-space: nowrap; /* <br>で明示した行内では折り返させない */
}
@media only screen and (max-width: 768px) {
  .p-career-strengths__rings-icon-caption {
    font-size: 1rem;
  }
}

.p-career-strengths__rings-icon--1 {
  left: 18.6%;
  width: 8.6%;
}

.p-career-strengths__rings-icon--2 {
  left: 50%;
  width: 8.4%;
}

.p-career-strengths__rings-icon--3 {
  left: 81.4%;
  width: 9%;
}

/* PC表示では輪の中に実HTMLキャプションが表示されるため、
   下のp-career-strengths__listにあるitem-ttl（見出し）は重複表示になる。
   デザイン参考画像でもPCでは輪の下は本文(item-txt)のみで見出しの重複は
   ない一方、SP表示では輪が小さくなり輪内キャプションが読みづらくなる分、
   従来通りitem-ttlを見出しとして改めてリスト表示している。そのため
   item-ttlはSP（768px以下）でのみ表示し、PCでは非表示にする。 */
.p-career-strengths__list {
  display: flex;
  margin-top: 2.1rem;
  column-gap: 2rem;
  text-align: center;
  justify-content: center;
  /* Strengths SP: リング画像・アイコン画像とも%基準の絶対配置のため、
     PCと同じ.p-career-strengths__ringsがそのまま縮小されて再現される。
     ここではitem-ttl/item-txtを縦積みリストに変えるだけでよい。 */
}
@media only screen and (max-width: 768px) {
  .p-career-strengths__list {
    display: block;
    margin-top: 2.8rem;
    text-align: left;
  }
}

.p-career-strengths__list > li {
  flex: 1;
  box-sizing: border-box;
  max-width: 250px;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-career-strengths__list > li {
    padding: 0;
    margin-top: 2.8rem;
    max-width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-strengths__list > li:first-child {
    margin-top: 0;
  }
}

.p-career-strengths__item-ttl {
  display: none;
  /* 1280px時1.7rem/768px時1.4remを補間するfluid clamp。 */
  font-size: clamp(1.4rem, 0.95rem + 0.5859vw, 1.7rem);
  font-weight: 700;
  text-align: center;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-career-strengths__item-ttl {
    display: block;
    text-align: left;
    font-size: 1.6rem;
  }
}

.p-career-strengths__item-txt {
  /* 1280px時1.6rem/768px時1remを補間するfluid clamp（SP側での上書き不要）。 */
  font-size: 1.6rem;
  line-height: 1.8;
  /* 元はtext-align: leftだったが、.p-interview-card__aと同じ理由・同じ
     対応（右端の改行位置がガタつくとの指摘）でjustifyに変更。余白は
     変更していない。 */
  text-align: justify;
  text-justify: inter-character;
  color: var(--career-gray);
}
@media only screen and (max-width: 768px) {
  .p-career-strengths__item-txt {
    font-size: 1.4rem;
    margin-top: 0.7rem;
    line-height: 1.6;
  }
}

/* --------------------------------------------------------------------
   Job
   -------------------------------------------------------------------- */
.p-career-job {
  background: var(--career-bg-alt);
  padding: 9.7rem 0 16rem;
  /* 中身1279px+左右
     32pxパディング=max-width 1343px(134.3rem)に上書き。 */
  --inner-max-width: 134.3rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-job {
    padding: 10.2rem 0 5rem;
  }
}

/* 参考画像（PC/SP共通デザイン）により、他セクションの.p-career-secttl
   （英文見出しの下に和文タイトルが積み重なる縦積みレイアウト）とは別に、
   このセクションだけ横並びに上書きする。参考画像をピクセル実測したところ、和文「仕事紹介」は
   Our Strengthsのような下端揃えではなく、英字「Job」の縦方向のほぼ中央に
   揃っていたため、align-items: flex-endではなくcenterを使用している。 */
.p-career-job .p-career-secttl {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-career-job .p-career-secttl {
    margin-bottom: 1.7rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-job .p-career-secttl__en .p-career-splittext__char {
    padding-bottom: 1.5rem;
  }
}

.p-career-job .p-career-secttl__ja {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figma実測（仕事紹介フレーム 281:100, 幅1279px）から算出した千鳥格子配置。
   カラム境界(px): 0 / 164 / 720 / 736 / 884 / 900 / 1115 / 1279
   → 16.4 / 55.6 / 1.6 / 14.8 / 1.6 / 21.5 / 16.4 (rem) の7カラムで、
   横方向の隙間(1.6rem)もカラム自体として表現しているためcolumn-gapは0。
   1: 法人保険部(広) col 1/3, row1  2: 更新保全部(狭) col 4/7, row1
   3: 個人保険部(広) col 2/5, row2  4: DX推進室(狭)   col 6/8, row2 */
.p-career-job__list {
  display: grid;
  /* 元は16.4rem 55.6rem...というrem固定幅のグリッドで、コンテナ幅に関係なく
     常に127.9rem(1279px)固定だったため、769px〜1279px幅でグリッドが
     クリップされてしまっていた（このページの他の箇所はfluid clamp対応済みだが
     ここだけ取り残されていたバグ）。列の比率は変えずrem→frに変換し、
     コンテナ幅に応じて比例的に縮小するようにした。768px以下は従来通り
     1カラム積みに切り替える（千鳥格子のまま縮小すると一部カードが細くなり
     すぎて読みにくくなるため、SPだけは配置を作り直す方針を維持）。 */
  grid-template-columns: 16.4fr 55.6fr 1.6fr 14.8fr 1.6fr 21.5fr 16.4fr;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 1.7rem;
  /* Job: PC用の千鳥格子グリッドを解除し、1カラム縦積みに戻す。
     nth-childの明示placementは同じ詳細度のセレクタで上書きする（下記参照）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-job__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 1.6rem;
  }
}

.p-career-job__card {
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 31, 106, 0.08);
}

.p-career-job__card:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1;
}

.p-career-job__card:nth-child(2) {
  grid-column: 4/7;
  grid-row: 1;
}

.p-career-job__card:nth-child(3) {
  grid-column: 2/5;
  grid-row: 2;
}

.p-career-job__card:nth-child(4) {
  grid-column: 6/8;
  grid-row: 2;
}

/* [注意] このオーバーライドは .p-career-job__list > .p-career-job__card という
   詳細度(0,2,0)で、直前の .p-career-job__card:nth-child(N)（同じく詳細度(0,2,0)）
   と完全に同じ詳細度のため、CSSの記述順で勝敗が決まる。必ずnth-childの
   配置指定より「後」に書くこと（先に書くとSPでも千鳥格子の配置が残ってしまう）。 */
@media only screen and (max-width: 768px) {
  .p-career-job__list > .p-career-job__card {
    grid-column: 1;
    grid-row: auto;
  }
}

/* SPのみ表示順を「法人→個人→更新→DX」に変更（PC千鳥格子の並びは変更なし）。
   HTML側のカード順（法人・更新・個人・DX）自体は変えず、flexbox/gridの
   order プロパティだけで並び替えている。理由: このセクションは
   :nth-child(N)で「N番目＝どのカードか」を判定してPC用のgrid-column/
   grid-rowを出し分けている（このすぐ上のコメント参照）ため、HTML側の
   カード順を直接入れ替えると、PC千鳥格子の配置・配色まで一緒に崩れて
   しまう。orderはgrid-column/grid-rowを明示指定した要素には効かない
   （明示配置がorderより優先される仕様）ため、SPのみに適用しても
   PC側の見た目には影響しない。
   なお、各カードのフェードインアニメーション（career.js側
   initGroupStaggerReveal）はHTML順（法人→更新→個人→DX）のまま0.22秒刻みで
   発火するため、SPの新しい表示順（法人→個人→更新→DX）とは発火順が完全には
   一致しない（2番目に表示される「個人」が3番目の遅延で発火する）。見た目の
   差は僅かだが、気になる場合は教えてほしい。 */
@media only screen and (max-width: 768px) {
  .p-career-job__list > .p-career-job__card:nth-child(1) {
    order: 1;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-job__list > .p-career-job__card:nth-child(3) {
    order: 2;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-job__list > .p-career-job__card:nth-child(2) {
    order: 3;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-job__list > .p-career-job__card:nth-child(4) {
    order: 4;
  }
}

.p-career-job__card-head {
  background: linear-gradient(90deg, var(--career-job-grad-start), var(--career-job-grad-end));
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1.8rem 4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-job__card-head {
    font-size: 1.4rem;
    padding: 1.8rem 1.6rem;
  }
}
@media only screen and (max-width: 768px) {
  .p-career-job__card-head span {
    font-size: 1.2rem;
  }
}

.p-career-job__card-body {
  display: flex;
  flex-wrap: wrap;
}

.p-career-job__card-txt {
  flex: 1 1 30rem;
  padding: 3.1rem 3.1rem 2.8rem 4rem;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
  text-justify: inter-character;
}
@media only screen and (max-width: 768px) {
  .p-career-job__card-txt {
    padding: 1rem 1.6rem 0.6rem;
    font-size: 1.4rem;
  }
}

.p-career-job__card-img {
  flex: 1 1 27.6rem;
}
@media only screen and (max-width: 768px) {
  .p-career-job__card-img {
    height: 21rem;
  }
}

.p-career-job__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media only screen and (max-width: 768px) {
  .p-career-job__card-img img {
    object-position: bottom;
  }
}

/* --------------------------------------------------------------------
   Interview
   -------------------------------------------------------------------- */
.p-career-interview {
  padding: 15.6rem 0 16.4rem;
  position: relative;
  overflow: visible;
  /* 背景画像（.p-career-interview__bg-img）をz-index:-1で本文の
     後ろに配置するために、このセクション自身に明示的なz-index（0）を指定して
     スタッキングコンテキストを作る（Our Strengthsと同じ理由。詳細は
     .p-career-strengthsのコメント参照）。 */
  z-index: 0;
  /* 中身1280px+左右
     32pxパディング=max-width 1344px(134.4rem)に上書き。 */
  --inner-max-width: 134.4rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-interview {
    padding: 4.6rem 0 5.2rem;
  }
}

/* カード3の実測位置（1051px, top:0）を基準にスケール換算した近似位置・サイズ
   （Figma実データ未取得のため、目視調整）。Our Strengthsと異なり、
   この配置ではセクションの右端よりわずかに外側へ、下端の内側で収まる
   （＝Jobセクションのような隣接セクションへの縦方向のはみ出しは無い）。 */
/* [注意] .p-career img { max-width:100%; height:auto; } のリセットが
   詳細度(0,1,1)でこのクラス単体(0,1,0)を上回ってしまうため、widthに対して
   heightを自由な比率で指定できるよう、あえて.p-career-interviewを前置して
   詳細度(0,2,0)まで上げている（Our Strengths側はheight:autoのままなので
   このリセットと衝突せず、この上書きは不要だった）。 */
.p-career-interview .p-career-interview__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; } のリセット打ち消し
     （詳細は.p-career-strengths__bg-imgのコメント参照）。 */
  max-width: none;
  /* 1600px超で位置・サイズとも
     ビューポート幅に比例して拡大する。768〜1600pxの間はfluid化せず固定
     （ユーザー確認済み、詳細は.p-career-strengths__bg-imgのコメント参照）。 */
  right: min(-38rem, -23.75vw);
  bottom: max(12rem, 7.5vw);
  width: max(77rem, 48.125vw);
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-interview .p-career-interview__bg-img {
    width: 50rem;
    height: auto;
    right: -27rem;
    bottom: 113rem;
  }
}

/* PCでは3枚のカードが同じ高さで
   揃わず、大きく互い違いに縦オフセットして配置されている。カード3（右）は
   セクション最上部から開始し、見出し（Interview/社員インタビュー/リード文）
   はカード2（中央、career_interview_person2.jpg）の真上に中央揃えで収まる。
   3列グリッドはgapが左右対称なため、コンテナ幅の50%は必ず中央列（カード2）の
   中心と一致する。見出しをposition:absoluteでleft:50%＋中央揃えにして
   浮かせ、カード列は通常フローのままmargin-topでずらすことで、
   見出しの下にカード2が食い込む配置を再現。 */
.p-career-interview__wrap {
  position: relative;
}

/* [不具合修正] 「Interviewの文字がInしか見えず、terviewが見えない
   （消したら次の2文字だけ見える）」不具合。ユーザー実測により、
   transform: translateX(-50%)を外すと正常に表示されることが判明。
   このtransformはleft:51%だけでは「左端」しか指定できない絶対配置の箱を、
   幅が可変（"Interview"の実際の文字数依存）のまま51%地点を中心に中央寄せ
   するための定石だが、久しく使ってきたこの手法自体が、1文字ずつ分割され
   background-clip: textのグラデーションを持つ大量のネストしたspan
   （.p-career-splittext__char-mask等）を子孫に持つ要素に対して使われた
   場合、一部ブラウザでtransformによるGPU合成レイヤー化とグラデーション
   クリップ計算が絡んで描画崩れを起こすと判明。
   transformを使わずに同じ「51%地点を中心とした可変幅コンテンツの中央寄せ」
   を実現するため、.p-career-interview__head自体は幅0のflexコンテナに変更
   （left:51%の地点そのものに幅0で配置し、justify-content: centerで中身を
   左右対称にオーバーフローさせることで中央寄せを再現）、実際の見出し内容
   （h3+p）は新設した.p-career-interview__head-inner（マークアップ側にも
   ラッパーdiv追加）に移動した。flex-shrink: 0を明示しているのは、
   flexアイテムのデフォルトmin-width: autoに頼るとコンテナの幅0に引っ張られて
   本来の内容幅より縮んでしまい、結果的に文字が折り返して重なる別の不具合が
   出ることを検証で確認したため（flex-shrink: 0で常に内容そのままの幅を
   維持し、幅0のコンテナからは左右対称にはみ出す形にする）。 */
.p-career-interview__head {
  position: absolute;
  /* 見出しブロックの開始位置はセクション上端より14%下げ（手動調整値）。 */
  top: 14%;
  left: 51%;
  width: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
  /* Interview: PCの見出しabsolute配置＋大きな縦オフセットを解除し、
     見出し→カード1→カード2→カード3の通常の縦積みに戻す。
     769〜880px幅で見出し（position:absolute,
     left:51%）とカード1が実際に重なることを確認（890px以上では重ならない）。
     見出しをフルードでずらす方式は、absolute配置・巨大フォント
     （10.3rem）・3列グリッドの互い違いmargin-topが絡み合っておりリスクが
     高いため、他の縦積みセクションと同様に「通常の縦積みに戻す」SP表示への
     切り替えブレークポイントを768px→900px（実測890pxに安全マージン）に
     引き上げて対応した。 */
}
@media only screen and (max-width: 900px) {
  .p-career-interview__head {
    position: static;
    max-width: none;
    width: auto;
    /* SPでは通常フローの縦積みに戻すため、PC用のflexセンタリング一式も
       解除する。 */
    display: block;
    margin-bottom: 2.2rem;
  }
}

.p-career-interview__head-inner {
  /* 見出し・和文タイトル・リード文を
     中央揃えではなく左揃えの縦積みにしている（PC/SP共通デザイン）。 */
  text-align: left;
  /* 上記コメント参照: flexアイテムとして本来の内容幅を維持するため縮小を
     禁止する（PC/flexの時のみ意味を持ち、SP/display:blockでは無害）。 */
  flex-shrink: 0;
}

/* 左揃え後の縦方向の間隔調整（手動調整値）: 見出し本体の下余白と
   和文タイトルの上余白をゼロにし、見出し3行（英字/和文/リード文）の間隔を
   詰めている。 */
.p-career-interview__head .p-career-secttl {
  margin-bottom: 0;
}

.p-career-interview__head .p-career-secttl__en {
  font-size: 10.3rem;
  letter-spacing: -3px;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__head .p-career-secttl__en {
    font-size: 4.8rem;
    letter-spacing: 0.3rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-interview__head .p-career-secttl__en .p-career-splittext__char {
    letter-spacing: 0.3rem;
  }
}

/* [不具合修正] 上記letter-spacing: -3pxは、1文字ずつ分割された
   .p-career-splittext__char-mask（display:inline-block）の並びには
   信頼して適用できない（.p-career-splittext__word等側でletter-spacing:
   normalに打ち消し済み）。同じ視覚効果をmargin-rightで再現する
   （最後の文字の後ろにも-3px分の余白が残るが、微小なため無視できる）。 */
.p-career-interview__head .p-career-secttl__en .p-career-splittext__char-mask {
  margin-right: -3px;
}

.p-career-interview__head .p-career-secttl__ja {
  margin-top: 0;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__head .p-career-secttl__ja {
    margin-bottom: 0;
  }
}

.p-career-interview__head .p-career-lead {
  max-width: 42rem;
  /* 左揃えに伴い、中央揃え用のmargin: 0 autoを解除。 */
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.p-career-interview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1280px時3.2rem/768px時4rem（SPは逆にgapが広い）を補間するfluid clamp
     （SP側での上書き不要）。 */
  gap: 5.7rem;
  align-items: start;
  /* 見出しのブレークポイント（900px、上記
     .p-career-interview__headのコメント参照）に同期。3列グリッド＋
     互い違いmargin-topのままだと900px手前で1カラムあたりの幅が狭くなり
     すぎるため、見出しと同じタイミングで1カラムに切り替える。 */
}
@media only screen and (max-width: 900px) {
  .p-career-interview__list {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }
}

.p-career-interview__list > .p-career-interview__card:nth-child(1) {
  margin-top: 27rem;
  /* 2026-09-14: PC表示のみT・K（1番目）とT・T（3番目）の表示位置を
     入れ替え（先方指示）。SPは従来の並び順（T・T→K・T→T・K）を維持したい
     とのことなので、SPブレークポイント内でのみorderプロパティにより
     見た目の順序をHTML入れ替え前の状態に戻している（HTML自体の入れ替えは
     PCの3列千鳥格子レイアウトがnth-childベースのmargin-top指定に依存して
     いるため、そちらを正しく機能させる目的。SP側はこの千鳥格子レイアウトを
     使わないシンプルな1カラム表示のため、orderで見た目の順序だけを
     動かしても支障がない）。 */
}
@media only screen and (max-width: 900px) {
  .p-career-interview__list > .p-career-interview__card:nth-child(1) {
    margin-top: 0;
    order: 3;
  }
}

.p-career-interview__list > .p-career-interview__card:nth-child(2) {
  margin-top: 46rem;
}
@media only screen and (max-width: 900px) {
  .p-career-interview__list > .p-career-interview__card:nth-child(2) {
    margin-top: 0;
    order: 2;
  }
}

.p-career-interview__list > .p-career-interview__card:nth-child(3) {
  margin-top: 0;
}
@media only screen and (max-width: 900px) {
  .p-career-interview__list > .p-career-interview__card:nth-child(3) {
    order: 1;
  }
}

.p-career-interview__card {
  position: relative;
}

.p-career-interview__card-img {
  overflow: hidden;
  /* 375px幅の
     参考画像実測: 写真は横幅266px(26.6rem)固定でカード幅いっぱいには
     広げず、奇数カード（1, 3枚目）は左寄せ、偶数カード（2枚目）は右寄せに
     交互配置されていた（PCの3列グリッド・互い違いmargin-topを、SPでは
     「写真自体の左右位置を互い違いにする」形に置き換えたデザインと判断）。 */
}
@media only screen and (max-width: 900px) {
  .p-career-interview__card-img {
    width: 26.6rem;
    max-width: 100%;
  }
}

.p-career-interview__card-img img {
  width: 100%;
  display: block;
}

/* 上記card-imgの実測に対応: 偶数カード（2枚目）の写真だけ右寄せにする
   （奇数カードはblock要素のデフォルトのまま左寄せなので上書き不要）。 */
@media only screen and (max-width: 900px) {
  .p-career-interview__list > .p-career-interview__card:nth-child(even) .p-career-interview__card-img {
    margin-left: auto;
  }
}

.p-career-interview__card-box {
  background: var(--career-blue-mid);
  color: #fff;
  /* 左paddingも同じ理由（900〜1300px程度でテキスト幅が
     圧迫され読みづらい）でfluid化。3.9rem(PC基準)は今回追加した
     margin-leftの縮小だけでは まだ余白の割合が大きすぎたための追加対応。
     900px時点は右paddingと同じ1.7rem（左右対称）まで縮め、1600px時点は
     デザイン基準値3.9remのまま。上下padding(3rem/1.7rem)は幅方向の
     圧迫とは無関係なので変更していない。 */
  padding: 3rem 1.7rem 1.7rem clamp(1.7rem, -1.1286rem + 3.1429vw, 3.9rem);
  /* 3列グリッドのカード幅自体が900〜1300px程度の範囲でかなり狭くなる
     （例: 950px幅で1カードあたり実測約260px）のに対し、左margin
     (4.9rem=49px)が箱の利用可能幅をさらに圧迫し、日本語テキストが
     不自然な位置で折り返されて読みにくくなっていた（実測で確認）。PCデザイン
     （3列グリッド・写真下端への食い込み配置）自体は900px（Interviewの
     SP切り替え幅）まで維持するため、左marginだけを
     900px（0rem）〜1600px（4.9rem、デザイン基準値）でfluid clampにして
     滑らかに縮小させる（上端の食い込み量-6remは幅に関係なく見た目に
     問題が無いため固定のまま）。 */
  margin: -6rem 0 0 clamp(0rem, -6.3rem + 7vw, 4.9rem);
  position: relative;
  /* Interview全体のSP切り替え幅(900px)に同期
     （詳細は.p-career-interview__headのコメント参照）。 */
}
@media only screen and (max-width: 900px) {
  .p-career-interview__card-box {
    /* 実測値（写真幅26.6remに対し、箱は写真の右端に揃え、写真の左端から
       3.5rem内側に入った位置を箱の左端にする＝箱幅23.1rem）。
       上方向の写真への食い込み量(-4rem)は変更なし。 */
    width: 23.2rem;
    max-width: calc(100% - 3.5rem);
    margin: -4rem 0 0 3.4rem;
    /* clamp()自体は900px未満でも計算上1.7remで底打ちし続けるが、
       真のSP幅（1カラム表示でboxの実幅は十分広い）では従来通り
       左paddingを3.9remに保ちたいため、ここで明示的に元の値へ戻す
       （900〜1600pxの縮小対象から真のSP幅を除外する）。 */
    padding: 1.8rem 1.6rem 1.6rem 2.4rem;
  }
}

/* 上記card-boxの実測に対応: 偶数カード（2枚目）の箱だけ右寄せにする
   （写真が右寄せなので、箱も同じ右端に揃うよう右寄せへ切り替える。
   width指定済みのブロック要素にmargin-left: autoを当てる標準的な右寄せ）。 */
@media only screen and (max-width: 900px) {
  .p-career-interview__list > .p-career-interview__card:nth-child(even) .p-career-interview__card-box {
    margin-left: auto;
  }
}

.p-career-interview__card-quote {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__card-quote {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
  }
}

.p-career-interview__card-name {
  margin-top: 1.3rem;
  font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__card-name {
    margin-top: 0.6rem;
    font-size: 1.3rem;
  }
}

.p-career-interview__card-more {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__card-more {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    gap: 1.3rem;
    letter-spacing: 0;
  }
}

.p-career-interview__card-more-icon {
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background: #84abfd;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-career-interview__card-more-icon {
    width: 3.7rem;
    height: 3.7rem;
  }
}

/* 右側の丸バッジ内の矢印は擬似要素(::after)で実装。バッジが
   display:flex+center揃えのため、::afterも自動で中央に配置される。
   線で描いた細いシェブロン（塗りつぶし三角ではない）で実装。 */
.p-career-interview__card-more-icon::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-style: solid;
  border-color: #fff;
  border-width: 0.18rem 0.18rem 0 0;
  transform: rotate(45deg);
  /* 回転の視覚的重心を調整し、円の中央に来るよう微調整。 */
  margin-left: -0.35rem;
}

/* --------------------------------------------------------------------
   Company
   -------------------------------------------------------------------- */
.p-career-company {
  background: var(--career-bg-alt);
  padding: 16.4rem 0 19rem;
  position: relative;
  /* 背景画像（.p-career-company__bg-img）をz-index:-1で本文の
     後ろに配置するために、このセクション自身に明示的なz-index（0）を指定して
     スタッキングコンテキストを作る（Our Strengths/Interviewと同じ理由。
     詳細は.p-career-strengthsのコメント参照）。 */
  z-index: 0;
  /* 中身1302px+左右
     32pxパディング=max-width 1366px(136.6rem)に上書き。 */
  --inner-max-width: 136.6rem;
  --inner-padding-x: 3.2rem;
  margin: 0 0 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-career-company {
    padding: 6rem 0 7rem;
  }
}

/* エントランス写真（.p-career-company__img、実測で
   ビューポート右端まで届く）を基準にスケール換算した近似位置・サイズ
   （Figma実データ未取得のため、目視調整）。ソース画像は縦横比0.937
   （トリミング後3328x3552）だが、実測した見た目の比率に合わせるため、
   width/heightを個別に指定して若干引き伸ばしている（ぼかしの効いた
   背景装飾のため視覚的な破綻はない）。 */
.p-career-company .p-career-company__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; } のリセット打ち消し
     （詳細は.p-career-strengths__bg-imgのコメント参照）。このセクションは
     PC基準値が160rem(1600px)と最大で、この打ち消しが無いと1600px未満の
     ビューポートで常にビューポート幅そのものまで縮小されてしまい
     （＝「1600pxで固定」が実質機能していなかった）、最も影響が大きかった
     箇所。 */
  max-width: none;
  /* 1600px超で位置・サイズとも
     ビューポート幅に比例して拡大する。768〜1600pxの間はfluid化せず固定
     （ユーザー確認済み、詳細は.p-career-strengths__bg-imgのコメント参照）。 */
  right: min(-32rem, -20vw);
  bottom: min(-80rem, -50vw);
  width: max(160rem, 100vw);
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-company .p-career-company__bg-img {
    width: 60rem;
    height: auto;
    right: -26rem;
    bottom: -27.2rem;
  }
}

.p-career-company .p-career-secttl__en .p-career-splittext__char {
  padding-bottom: 1.5rem;
}

.p-career-company__flex {
  display: flex;
  gap: 5.4rem;
  align-items: flex-start;
}
@media only screen and (max-width: 768px) {
  .p-career-company__flex {
    flex-direction: column;
    /* SP参考画像実測: エントランス写真とCompany見出しの間隔は
       3.9rem（PC用のgap:5.4remのままだと空きすぎる）。写真側は
       .p-career-company__imgのorder:-1で見た目の順序を先頭に入れ替えて
       いるため、このgapはエントランス写真→見出しの間に入る。 */
    gap: 2.9rem;
  }
}

.p-career-company__txt {
  flex: 1 1 50rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* flex-direction:columnではflex-basis(50rem)が高さ方向の基準寸法になり、
     テキスト・写真の間に意図しない大きな空白ができてしまうため、
     SPではflex-basisを解除する。 */
}
@media only screen and (max-width: 768px) {
  .p-career-company__txt {
    flex: none;
    align-items: flex-start;
  }
}

.p-career-company__txt .p-career-secttl {
  margin-bottom: 7.1rem;
}
@media only screen and (max-width: 768px) {
  .p-career-company__txt .p-career-secttl {
    margin-bottom: 0;
  }
}

.p-career-company__txt .p-career-secttl__ja {
  margin-bottom: 0;
  margin-top: -2rem;
}

.p-career-company__body {
  font-size: 1.6rem;
  line-height: 2;
  max-width: 391px;
  width: 100%;
  margin: 0 0 0 13.3rem;
  /* .p-interview-card__aと同じ理由・同じ対応（右端の改行位置がガタつく
     との指摘）。余白は変更せず、両端揃えのみ追加。 */
  text-align: justify;
  text-justify: inter-character;
}
@media only screen and (max-width: 768px) {
  .p-career-company__body {
    margin: 0;
    font-size: 1.4rem;
  }
}

/* Companyセクションだけは
   右側のエントランス写真を画面右端まで伸ばす（bleed）。テキスト側は
   通常どおり.p-career__inner（中身1302px+左右32px）の内側に収める一方、
   写真側だけ右方向にbreak outさせたい。
   .p-career__innerが margin: 0 auto で中央揃えされているとき、その右端
   からビューポート右端までの距離は max(0px, (100vw - 136.6rem) / 2) に
   一致する（Companyの--inner-max-widthと同じ136.6rem基準）。さらに
   .p-career__inner自体の右padding（3.2rem）ぶんも写真は内側にあるため、
   その両方を合計した距離だけ右方向にmargin-rightをマイナスにして
   引っ張り出すことで、写真の右端を実際にビューポート右端（0px）まで
   届かせている。ビューポートが136.6remより狭い場合は前者が0に
   フォールバックし、paddingぶん（3.2rem）だけ引っ張り出す形になる
   （SPではそもそも縦積みレイアウトになるため対象外＝margin-right: 0）。

   上記のbleed量はビューポート幅に比例して際限なく伸び続けるため、
   flex-grow:1と組み合わさることでエントランス写真自体（＝コンテンツ）も
   1600px超で無限に大きくなり続けてしまう。コンテンツは1600px時点のサイズで
   固定、大きくなるのは背景画像だけにするため、
   min(…, 14.9rem) でbleed量を1600px時点の値（max(0px,(1600px-136.6rem)/2)
   + 3.2rem = 11.7rem + 3.2rem = 14.9rem）に頭打ちさせた。これにより
   1600px以下は従来と全く同じ挙動のまま、1600px超ではbleed量・ひいては
   写真の実寸が1600px時点のまま変化しなくなる（＝背景画像（__bg-img）
   だけがビューポートに比例して拡大を続ける）。 */
.p-career-company__img {
  flex: 1 1 55rem;
  margin-right: calc(-1 * min(max(0px, (100vw - 136.6rem) / 2) + 3.2rem, 14.9rem));
  /* SP参考画像実測: エントランス写真がCompany見出しより先
     （セクション最上部）に表示され、写真は左に8.1rem分（--inner-padding-x
     3.2rem＋この4.9rem）の余白を残しつつ右端はビューポート端まで
     bleedする構成だった。実測: 写真幅29.4rem／左端はビューポート端から
     8.1rem。order:-1で見た目の順序をflexで先頭に入れ替え、幅を明示指定
     することでPCと同じ「右端bleed」を再現している
     （align-items:flex-startのため、幅29.4rem＋margin-left 8.1rem分で
     ちょうど右端がビューポート端に一致する）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-company__img {
    order: -1;
    flex: none;
    margin-top: 0;
    margin-left: auto;
    margin-right: -1.6rem;
    width: 29.4rem;
  }
}

.p-career-company__img img {
  width: 100%;
  display: block;
}

/* 参考画像実測（目視近似）: 単純な2列グリッドではなく、
   3枚の写真（work01=女性+PC/大, work02=手元のPC作業/小, work03=握手/小）が
   左右にずれて重なり合う構成。work01を左に大きく、work02をその右上に、
   work03をwork02のさらに下（work01の右下と少し重なる位置）に配置する。 */
.p-career-company__sub {
  position: relative;
  margin-top: 6.5rem;
  height: 47.2rem;
  /* Company sub: SPでもPCと同様に3枚が重なり合う配置（写真1を大きく左、
     写真2をその右下、写真3をさらに左下に配置）。
     写真グループ自体が.p-career__innerの左右パディング
     （--inner-padding-x）を無視してビューポート端までbleedしていた
     （実測で写真1の左端がビューポート端=0）ため、
     margin-left/right: -3.2remで打ち消してbleedさせている。
     中身の3枚（.p-career-company__sub-img--1/2/3）はwidthを
     すべて%指定にしているため、実際の高さはビューポート幅に比例して
     変化する。親のheightをremの固定値にしていると、375px基準で実測した
     426pxのときだけ辻褄が合い、それ以外の画面幅では中身とコンテナの
     高さがズレてしまうため、heightもビューポート幅に連動するvw指定に
     変更（426px ÷ 375px × 100 = 113.6vw。このセクションは
     margin-left/right: -3.2remでビューポート端までbleedしており、
     コンテナ自身の実寸がちょうど100vwになっているため、vw指定で
     width基準の中身と同じ比率で伸縮する）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-company__sub {
    position: relative;
    height: 113.6vw;
    margin-left: calc(-1 * var(--inner-padding-x, 3.2rem));
    margin-right: calc(-1 * var(--inner-padding-x, 3.2rem));
  }
}

.p-career-company__sub-img {
  position: absolute;
  display: block;
  width: 100%;
  box-shadow: 0 1rem 3rem rgba(0, 31, 106, 0.15);
}

.p-career-company__sub-img--1 {
  left: 12%;
  top: 0;
  width: 34%;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-career-company__sub-img--1 {
    left: 0;
    top: 0;
    width: 65.6%;
    z-index: 1;
  }
}

.p-career-company__sub-img--2 {
  left: 65%;
  top: 0;
  width: 19.6%;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .p-career-company__sub-img--2 {
    left: 54.1%;
    top: 50%;
    width: 35.6%;
    z-index: 2;
  }
}

.p-career-company__sub-img--3 {
  left: 52%;
  top: 28.8rem;
  width: 19.6%;
  z-index: 3;
}
@media only screen and (max-width: 768px) {
  .p-career-company__sub-img--3 {
    left: 6.7%;
    top: auto;
    bottom: 0;
    width: 41.1%;
    z-index: 3;
  }
}

/* --------------------------------------------------------------------
   In Numbers
   -------------------------------------------------------------------- */
.p-career-numbers {
  background: var(--career-blue-mid);
  padding: 8.1rem 0 16rem;
  /* 中身1038px+左右
     32pxパディング=max-width 1102px(110.2rem)に上書き。 */
  --inner-max-width: 110.2rem;
  --inner-padding-x: 3.2rem;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers {
    padding: 3.5rem 0 4rem;
  }
}

.p-career-numbers .p-career-secttl__en {
  line-height: 1;
}

.p-career-numbers .p-career-secttl__ja {
  margin-bottom: 0;
}

.p-career-numbers .p-career-secttl {
  margin-bottom: 5.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers .p-career-secttl {
    margin-bottom: 2.3rem;
  }
}

.p-career-numbers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
    gap: 1.1rem;
  }
}

/* SP: 9項目を2カラムグリッド化。9番目（最後）だけ余って1個だけの
   行になるため、grid-column:1/-1で行全体を占有させたうえでjustify-self:
   centerし、widthを「2カラムグリッドの1カラム分の実寸」
   （(100% - gap) / 2 = 50% - 1.2rem）に明示的に合わせることで、他の
   カードと同じ幅のまま中央に配置している。 */
@media only screen and (max-width: 768px) {
  .p-career-numbers__card:last-child {
    grid-column: 1/-1;
    justify-self: center;
    width: calc(50% - 1.2rem);
  }
}
.p-career-numbers__card {
  background: #fff;
  border-radius: 0.8rem;
  padding: 3.2rem 2rem;
  text-align: center;
  /* カードは330×355の固定
     サイズ。幅は3列グリッド（gap 2.4rem、コンテンツ幅1038px）の
     計算上すでに330px(33rem)になるため高さのみ35.5rem(355px)に固定し、
     中身は縦方向中央寄せで配置（SPは1カラム表示のため高さ固定を解除）。 */
  box-sizing: border-box;
  height: 35.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__card {
    height: auto;
    padding: 2.6rem 0rem;
  }
}

.p-career-numbers__card-label {
  font-size: 1.6rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__card-label {
    font-size: 1.3rem;
  }
}

.p-career-numbers__card-value {
  margin-top: -0.8rem;
  font-size: 6.4rem;
  font-weight: 600;
  color: var(--career-numbers-value);
  font-family: var(--career-numeral);
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__card-value {
    font-size: 3.6rem;
    line-height: 1.4;
  }
}

.p-career-numbers__card-value span {
  font-size: 1.6rem;
  color: #001f6b;
  margin-left: 0.1rem;
  font-weight: 700;
  font-family: "Meiryo UI", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__card-value span {
    font-size: 1.2rem;
  }
}

/* アイコン画像は9点とも同一サイズ（149×130px固定）のため、CSSもその実寸
   （14.9rem×13rem）に合わせる。 */
.p-career-numbers__card-icon img {
  width: 14.9rem;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-career-numbers__card-icon img {
    width: 7.4rem;
    height: auto;
  }
}

/* --------------------------------------------------------------------
   Environment
   -------------------------------------------------------------------- */
.p-career-environment {
  padding: 11.3rem 0 12rem;
  position: relative;
  /* 背景画像（.p-career-environment__bg-img）をz-index:-1で
     本文の後ろに配置するために、position:relativeとあわせて明示的な
     z-index（0）を指定してスタッキングコンテキストを作る（Our Strengths等
     と同じ理由。詳細は.p-career-strengthsのコメント参照）。 */
  z-index: 0;
  /* 中身1055px+左右
     32pxパディング=max-width 1119px(111.9rem)に上書き。 */
  --inner-max-width: 111.9rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment {
    padding: 5rem 0 4.2rem;
    height: auto;
  }
}

/* 見出しテキストの実測位置を基準にスケール換算した
   近似位置・サイズ（Figma実データ未取得のため、目視調整）。このアセットは
   他の3セクション（背景_真ん中.png/背景画像_でかい.png）と違い、輪郭の
   はっきりしたブロブ形状だが、大部分をセクションの外（左上）に配置して
   視覚的なグラデーション部分だけをのぞかせているため、ぼかしたにじみ表現に
   なる。 */
.p-career-environment .p-career-environment__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; } のリセット打ち消し
     （詳細は.p-career-strengths__bg-imgのコメント参照）。打ち消しが
     .p-career imgの詳細度(0,1,1)に勝つよう、セレクタを親セクションで
     前置して詳細度0,2,0に上げている。 */
  max-width: none;
  /* 1600px超で位置・サイズとも
     ビューポート幅に比例して拡大する。768〜1600pxの間はfluid化せず固定
     （ユーザー確認済み、詳細は.p-career-strengths__bg-imgのコメント参照）。 */
  top: min(-25rem, -15.625vw);
  left: min(-44rem, -27.5vw);
  width: max(72rem, 45vw);
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-environment .p-career-environment__bg-img {
    width: 42rem;
    top: -24rem;
    left: -33rem;
  }
}

.p-career-environment .p-career-secttl {
  margin-bottom: 0;
}

.p-career-environment .p-career-secttl__en {
  line-height: 1;
}

.p-career-environment .p-career-secttl__ja {
  margin-bottom: 2.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment .p-career-secttl__ja {
    margin-bottom: 0;
  }
}

.p-career-environment__intro {
  font-size: 1.6rem;
  line-height: 1.9;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__intro {
    font-size: 1.4rem;
  }
}

/* 2ブロックを横並び2カラムの
   ジグザグ配置。各カラム幅50rem(500px)+gap5.5rem(55px)で
   コンテンツ幅105.5rem(1055px)ぴったりになる。2カラム目（幅広い分野を
   カバーした研修プログラム）は写真が上・テキストが下の縦積みで、かつ
   1カラム目より14rem(140px)上にずれた位置から始まる。SPはデザイン通り
   常にテキスト→写真の順で縦一列に並べる（ジグザグ・オフセットなし）。 */
.p-career-environment__blocks {
  display: flex;
  gap: 5.5rem;
  align-items: flex-start;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__blocks {
    flex-direction: column;
    gap: 0;
    margin-top: 3.7rem;
  }
}

.p-career-environment__blocks .p-career-environment__block {
  flex: 1 1 50rem;
  min-width: 0;
  /* SPはblocksがcolumn方向になり、flex-basis(50rem)が高さの最小値として
     効いてしまい余白が空くため、flexサイズ指定自体を解除する。 */
}
@media only screen and (max-width: 768px) {
  .p-career-environment__blocks .p-career-environment__block {
    flex: none;
  }
}

.p-career-environment__blocks .p-career-environment__block:first-child {
  margin-top: 14rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__blocks .p-career-environment__block:first-child {
    margin-top: 0;
  }
}

.p-career-environment__block + .p-career-environment__block {
  margin-top: 0;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__block + .p-career-environment__block {
    margin-top: 3.2rem;
  }
}

.p-career-environment__block-ttl {
  font-size: 2rem;
  font-weight: 700;
  color: var(--career-grad-start);
  margin-bottom: 0.7rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__block-ttl {
    font-size: 1.6rem;
  }
}

.p-career-environment__block-txt {
  font-size: 1.6rem;
  line-height: 1.9;
  /* .p-interview-card__aと同じ理由・同じ対応（右端の改行位置がガタつく
     との指摘）。余白は変更せず、両端揃えのみ追加。 */
  text-align: justify;
  text-justify: inter-character;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__block-txt {
    font-size: 1.4rem;
  }
}

.p-career-environment__flex {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}

/* 2カラム目はDOM順（テキスト→写真）を保ったまま、PCのみ
   column-reverseで見た目を写真→テキストに入れ替える。SPは常に
   デザイン通りテキスト→写真の順に戻す。 */
.p-career-environment__flex--reverse {
  flex-direction: column-reverse;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__flex--reverse {
    flex-direction: column;
  }
}

.p-career-environment__flex-txt {
  flex: none;
}

.p-career-environment__flex-img {
  flex: none;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__flex-img {
    margin: 0 -1.6rem;
  }
}

.p-career-environment__flex-img img {
  width: 100%;
  display: block;
}

.p-career-environment__note {
  margin-top: 3.4rem;
  font-size: 1.6rem;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__note {
    font-size: 1.4rem;
    margin-top: 2.4rem;
  }
}

.p-career-environment__note dt {
  margin-top: 1rem;
}

.p-career-environment__benefits {
  margin-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefits {
    margin-top: 4.6rem;
  }
}

.p-career-environment__benefits-intro {
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefits-intro {
    font-size: 1.4rem;
  }
}

.p-career-environment__benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin-top: 2.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefits-grid {
    grid-template-columns: 1fr;
    margin-top: 1.8rem;
    gap: 1.6rem;
  }
}

.p-career-environment__benefit-card {
  background: var(--career-bg-alt);
  border-radius: 0.8rem;
  padding: 2.5rem 5rem 2.5rem 2.4rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefit-card {
    padding: 1.2rem 0 1.3rem 1.5rem;
  }
}

.p-career-environment__benefit-icon {
  flex: none;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefit-icon {
    width: 11.8rem;
    height: 11.8rem;
  }
}

.p-career-environment__benefit-icon img {
  width: 100%;
  height: auto;
}

.p-career-environment__benefit-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--career-numbers-value);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #001f6b;
  margin-bottom: 1rem;
  display: block;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefit-ttl {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.7rem;
  }
}

.p-career-environment__benefit-txt {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .p-career-environment__benefit-txt {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------
   Recruit
   -------------------------------------------------------------------- */
.p-career-recruit {
  background: var(--career-bg-alt);
  padding: 11rem 0 11.6rem;
  position: relative;
  /* 背景装飾画像（.p-career-recruit__bg-img）にz-index:-1を指定しているため、
     このセクション自体にも明示的なz-indexを与えてスタッキングコンテキストを
     作る必要がある（position:relativeだけでは生成されず、画像が他セクションの
     背景の下に描画されて見えなくなってしまう）。 */
  z-index: 1;
  /* 中身1138px+左右
     32pxパディング=max-width 1202px(120.2rem)に上書き。
     ※このセクション内の.p-career-recruit__table（募集職種などWP管理項目の
     テーブル）だけは中身1280px/左右32pxと別指定のため、後述のとおり
     .p-career__innerの幅制約から独立してbreak outさせている。 */
  --inner-max-width: 120.2rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit {
    padding: 3.5rem 0 16.7rem;
  }
}

.p-career-recruit .p-career-secttl {
  margin-bottom: 0;
}

.p-career-recruit .p-career-secttl__en {
  line-height: 1;
}

.p-career-recruit .p-career-secttl__ja {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit .p-career-secttl__ja {
    margin-bottom: 0;
  }
}

.p-career-recruit .p-career-recruit__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; } のリセット打ち消し
     （詳細は.p-career-strengths__bg-imgのコメント参照）。このセクションは
     PC基準値が145rem(1450px)と大きく、Companyに次いで影響が大きかった
     箇所。打ち消しが.p-career imgの詳細度(0,1,1)に勝つよう、セレクタを
     親セクションで前置して詳細度0,2,0に上げている。 */
  max-width: none;
  /* 1600px超で位置・サイズとも
     ビューポート幅に比例して拡大する。768〜1600pxの間はfluid化せず固定
     （ユーザー確認済み、詳細は.p-career-strengths__bg-imgのコメント参照）。 */
  right: min(-40rem, -25vw);
  bottom: min(-57rem, -35.625vw);
  width: max(145rem, 90.625vw);
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit .p-career-recruit__bg-img {
    width: 80rem;
    right: -36.6rem;
    bottom: -31.3rem;
  }
}

.p-career-recruit__intro {
  font-size: 1.6rem;
  margin-bottom: 10.5rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__intro {
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
  }
}

.p-career-recruit__circles {
  display: flex;
  justify-content: center;
  margin-bottom: 3.2rem;
}

.p-career-recruit__circles img {
  width: 100%;
  max-width: 90rem;
}

/* Our Strengthsとおなじ
   career_icon_circles_base.png（輪の中心=18.6%/50.0%/81.4%）を使い、
   ロゴ画像（アイコン単体）とキャプション文字(HTML)を分離して実装。
   PC/SPともに同じ.ringsをそのまま縮小表示（Strengthsと同じ仕組み）。 */
.p-career-recruit__rings {
  position: relative;
  width: 100%;
  /* コンテンツ幅1138pxいっぱいに広げず857pxに制限し中央寄せ。 */
  max-width: 85.7rem;
  margin: 0 auto 2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__rings {
    margin: 0 auto 2.5rem;
  }
}

.p-career-recruit__rings-bg {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-recruit__rings-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-career-recruit__rings-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.p-career-recruit__rings-icon-caption {
  display: block;
  margin-top: 1.4rem;
  /* 輪自体がビューポート幅に応じて%で縮小するため、キャプションもvw基準の
     fluid clampで追従させる（390px時1rem〜1280px時1.8rem）。固定サイズだと
     SPで輪が小さくなった際に文字が輪からはみ出すため。 */
  font-size: clamp(1rem, 0.6494rem + 0.8989vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--career-navy);
  text-align: center;
  white-space: nowrap; /* <br>で明示した行内では折り返させない */
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__rings-icon-caption {
    font-size: 1rem;
    margin-top: 0.7rem;
  }
}

/* 新アイコン単体の実測px幅（146 / 238 / 159）をリング画像の全幅1714pxに
   対する比率に換算（旧アイコン+キャプション合成画像の実測幅から算出して
   いた14.24/13.89/9.74%とは異なる値になっている点に注意）。 */
.p-career-recruit__rings-icon--1 {
  left: 18.6%;
  width: 6.5%;
}

.p-career-recruit__rings-icon--2 {
  left: 50%;
  width: 10.5%;
}

.p-career-recruit__rings-icon--3 {
  left: 81.4%;
  width: 7%;
}

/* PCでは輪の中にHTMLキャプションが表示されるため、下のpersonaリストは
   本文(persona-txt)のみ表示し、見出し(persona-ttl)は重複を避けて非表示。
   SPでは輪が小さくキャプションが読みづらくなる分、persona-ttlを見出しと
   して改めてリスト表示する（Strengths同様の使い分け）。 */
.p-career-recruit__persona {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1280px時4rem/768px時3.2remを補間するfluid clamp（SP側での上書き不要）。 */
  gap: 4rem;
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 4.2rem;
  /* 上のp-career-recruit__ringsと横幅・中央位置を揃えるため、
     同じmax-width:857pxで囲う。 */
  max-width: 85.7rem;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__persona {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 2rem;
    margin-bottom: 4rem;
  }
}

.p-career-recruit__persona > li {
  max-width: 270px;
  width: 100%;
}

/* 均等3カラムgrid（gap 4rem）だと両端カラムの中心は15.11%/84.89%になり、
   上のp-career-recruit__ringsのアイコン中心（18.6%/50%/81.4%、リング画像の
   実測比率）とズレる。参考画像でも本文ボックスの中心はリング中心の縦線に
   正確に一致していたため、中央カラムはそのまま（50%で一致済み）、両端の
   み差分3.49%(=2.99rem)をtranslateXで中央寄りに補正してリング中心へ揃える。 */
.p-career-recruit__persona > li:first-child {
  transform: translateX(2.99rem);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__persona > li:first-child {
    transform: none;
  }
}

.p-career-recruit__persona > li:last-child {
  transform: translateX(-2.99rem);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__persona > li:last-child {
    transform: none;
  }
}

.p-career-recruit__persona-ttl {
  display: none;
  /* 1280px時1.7rem/768px時1.4remを補間するfluid clamp（Strengthsのitem-ttlと同じ）。 */
  font-size: clamp(1.4rem, 0.95rem + 0.5859vw, 1.7rem);
  font-weight: 700;
  color: var(--career-navy);
  margin-bottom: 0.8rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__persona-ttl {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 768px) {
  .p-career-recruit__persona-txt {
    font-size: 1.4rem;
  }
}

.p-career-recruit__step {
  max-width: 96.7rem;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step {
    max-width: 58.4%;
    width: 100%;
  }
}

.p-career-recruit__step-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2.1rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-ttl {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.8rem;
  }
}

/* 採用ステップ: career_step_flow_pc.pngのピクセル実測（フラット部の後に約18%の
   矢印/凹み形状が続く5分割シェブロン）をclip-pathで再現。5項目はほぼ等幅だった
   ため flex:1 1 0 の均等割りとし、隣り合う項目を先端の分だけ負のmargin-leftで
   重ね、z-indexを右にいくほど高くして「先端が次の凹みにはまる」見た目を作る。 */
.p-career-recruit__step-flow {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-flow {
    flex-direction: column;
    /* [不具合修正] gap:0.2remを追加しても実際の見た目の余白が
       2pxにならなかった理由: 各段はheight自体をamplitude(1.3rem=13px)分
       拡張したボックス（下記.step-item参照）になっており、隣接ボックスを
       margin-topで引き寄せて重ねる処理を入れていなかったため、
       gapが0でもamplitude分（13px）がそのまま見た目の余白になっていた
       （＝gap:0.2remを足すと13+2=15pxの余白になり、逆に広がって見えた）。
       正しくは、隣接ボックスをmargin-topで-(amplitude - 目標の余白)だけ
       引き寄せて重ね、実際に見える余白だけを目標値にする必要があった。
       gapプロパティ自体は撤去し、余白の調整は.step-itemのmargin-topで
       行う。 */
  }
}

.p-career-recruit__step-item {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  /* 1280px時1.6rem/768px時1.4remを補間するfluid clamp。
     padding/margin-leftはシェブロン形状（clip-path）依存の値でSPとは別形状に
     作り直しているため、こちらはブレイクポイントでの切り替えのまま。 */
  font-size: clamp(1.4rem, 1.1rem + 0.3906vw, 1.6rem);
  line-height: 1.4;
  padding: 4.4rem 2rem 3.8rem 4rem;
  clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
  margin-left: -3.6rem;
  position: relative;
  /* 採用ステップ SP: 5段通しの実測画像（f33fa1cf、200×335px）を各段の
     背景色ごとにマスク化してpx実測した。判明した点は3つ:
     (1) 段と段の間に白い余白は無く直接繋がっている（.step-flowのgapは
         撤去）。(2) amplitude（中央でのV字の沈み込み量）は実測13px。
         線形（直線）のVで、サインカーブではない。(3) 最後の段（入社）も
         他の中間段と全く同じ形状で下端が尖っており、フラットではない。
         天地とも同じV字が帯（厚みは中間段63px／
         先頭74px、既存値を流用）全体を貫通してスライドする形なので、
         中間段は上端ノッチ・下端突き出しの六角形、先頭（書類選考）だけ
         上端フラット・下端突き出しの五角形。最後の段は中間段と同一形状
         のため専用ルールは無い（このルールがそのまま適用される）。
         突き出す分（amplitude）だけbox自体の高さを+1.3rem増やし、
         align-items:centerのcenteringが「実際に塗られている帯の中央」に
         来るようpadding-top/bottomを非対称にして調整。 */
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-item {
    /* .p-career-recruit__step-item はPC用にflex: 1 1 0%
       （flex-basis:0%）を持っており、SPのflex-direction:columnでも
       解除しないと高さの主軸がflex-grow/shrinkに支配され、下で指定する
       明示的なheightが無視されてしまうため打ち消す。 */
    flex: none;
    /* 中間の段（一次面接／最終面接／条件提示／入社）: 上端は中央で
       1.3remへこみ、下端は中央で1.3rem突き出す「帯（厚み6.3rem）が
       V字にスライドする」形。突き出す分だけheight=6.3rem+1.3rem=7.6rem
       に拡張し、padding-topを0.8rem+1.3rem=2.1remにして、実際に
       塗られている6.3rem分の帯の中央にテキストが来るよう調整
       （padding-bottomは元の0.8remのまま）。 */
    padding: 2.1rem 1.6rem 0.8rem;
    height: 7.6rem;
    clip-path: polygon(0% 0, 50% 1.3rem, 100% 0, 100% 6.3rem, 50% 7.6rem, 0% 6.3rem);
    /* ボックス自体はamplitude分(1.3rem)高さが余分にあるので、そのまま
       積むと見た目の余白がamplitude分(13px)そのまま出てしまう。
       margin-topで-(1.3rem - 0.2rem) = -1.1rem引き寄せて重ね、
       実際に見える余白だけを狙い通りの0.2rem(2px)にする。 */
    margin: -1.1rem 0 0;
  }
}

.p-career-recruit__step-item:first-child {
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
  margin-left: 0;
  padding-left: 2rem;
  /* SP: 先頭の段（書類選考）は上端がフラット（何も上にないため）、
     下端だけ中央で1.3rem突き出す。
     amplitude(1.3rem)は他の段と揃えたまま、フラット帯の厚みは
     6.1rem（6.1rem+amplitude1.3rem=7.4rem）。
     padding-top/bottomは変更不要: この段のテキスト中心位置は
     centerY = padding-top + (height - padding-top - padding-bottom) / 2
     という計算になり、amplitude(A)にのみ依存する
     「padding-bottom = padding-top + A」の関係さえ保っていれば、
     フラット帯の厚み(T)が変わってもcenterYは常にT/2（＝フラット帯の
     ちょうど中央）になる（padding-top=1.6rem, padding-bottom=1.6+1.3
     =2.9remのまま据え置きでOK）。書類選考は<br>無しの1行テキストのため、
     実質コンテンツ高さ(2.9rem)でも十分収まる。
     これにより採用ステップ全体の高さは347px→334pxになり、334px制約も
     全段の矢印形状を保ったまま満たせる。 */
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-item:first-child {
    flex: none;
    padding: 1.6rem 1.6rem 2.9rem;
    height: 7.4rem;
    clip-path: polygon(0% 0, 100% 0, 100% 6.1rem, 50% 7.4rem, 0% 6.1rem);
    margin: 0;
  }
}

/* 最後の段（入社）は他の中間段と同じ矢印形状（下端も中央で1.3rem突き出す）
   のため、:last-child専用ルールは無い（base の .step-item ルールがそのまま
   適用され、他の中間段と全く同じ六角形になる）。先頭（書類選考）の
   フラット帯の厚みを6.1remにしていることで、全段の矢印形状を保ったまま
   合計高さが334pxになり、334px制約を満たしている。 */
.p-career-recruit__step-item:nth-child(1) {
  background: #85c0ff;
  z-index: 1;
}

.p-career-recruit__step-item:nth-child(2) {
  background: #5996f2;
  z-index: 2;
}

.p-career-recruit__step-item:nth-child(3) {
  background: #4086ef;
  z-index: 3;
}

.p-career-recruit__step-item:nth-child(4) {
  background: #2955dd;
  z-index: 4;
}

.p-career-recruit__step-item:nth-child(5) {
  background: #0036dc;
  z-index: 5;
}

/* 採用ステップ 出現アニメーション: 画面に入ったら左から順に
   「背景(chevron本体)→文字→次の背景→文字…」の順で1つずつ現れる。
   career.jsがIntersectionObserverで.step-flowを監視し、初期化時に
   js-animate-initを付与（＝JS動作時のみ初期状態を非表示にするプログレッシブ
   エンハンスメント。JSが動かない場合は最初から全表示のまま）、交差したら
   is-visibleを付与してtransition-delayの階段で1項目ずつ発火させる。 */
/* 注意: transitionプロパティは非表示の初期状態（このルール）ではなく、
   .is-visible側（下）にだけ書く。両方に書くと、js-animate-init付与の
   瞬間（＝要素がまだ完全表示のとき）にopacity:1→0への「消えるアニメ」まで
   意図せず発火してしまい、その後の本来の出現アニメと時間差が混ざって
   おかしくなる（実機検証で発見）。初期状態はtransitionなしで即座にopacity:0
   にしておき、.is-visible付与の瞬間だけtransitionを効かせることで
   「0→1」の出現だけをアニメーションさせる。 */
.p-career-recruit__step-flow.js-animate-init .p-career-recruit__step-item {
  opacity: 0;
  transform: translateX(-2.4rem);
  /* SPは横並び(PC)ではなく縦積みのステップフローなので、
     「横からスライドイン」ではなく「上からスライドイン」にしている。
     SPだけtranslateXからtranslateYに変更（出現順は既存のまま
     nth-child順＝書類選考→一次面接→…→入社で変更なし）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-flow.js-animate-init .p-career-recruit__step-item {
    transform: translateY(-2.4rem);
  }
}

.p-career-recruit__step-flow.js-animate-init .p-career-recruit__step-item-text {
  display: inline-block;
  opacity: 0;
}

.p-career-recruit__step-flow.js-animate-init.is-visible .p-career-recruit__step-item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__step-flow.js-animate-init.is-visible .p-career-recruit__step-item {
    transform: translateY(0);
  }
}

.p-career-recruit__step-flow.js-animate-init.is-visible .p-career-recruit__step-item-text {
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 背景→文字→背景→文字…と一列に時間差をつける（1ステップ=0.16s刻み）。 */
.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(1) {
  transition-delay: 0s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(1) .p-career-recruit__step-item-text {
  transition-delay: 0.16s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(2) {
  transition-delay: 0.32s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(2) .p-career-recruit__step-item-text {
  transition-delay: 0.48s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(3) {
  transition-delay: 0.64s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(3) .p-career-recruit__step-item-text {
  transition-delay: 0.8s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(4) {
  transition-delay: 0.96s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(4) .p-career-recruit__step-item-text {
  transition-delay: 1.12s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(5) {
  transition-delay: 1.28s;
}

.p-career-recruit__step-flow.is-visible .p-career-recruit__step-item:nth-child(5) .p-career-recruit__step-item-text {
  transition-delay: 1.44s;
}

/* 採用活動におけるハラスメント防止の取組みについて（2026-09-16追加）。
   採用ステップの下に、資料アイコン＋リンクテキスト＋外部リンクアイコンの
   1行リンクとして配置。 */
.p-career-recruit__harassment {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  color: #001f6b;
  font-size: 1.6rem;
  font-weight: 400;
  text-decoration: none;
  width: fit-content;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__harassment {
    /* [2026-09-16 SP修正] flexのままだとテキストが2行に折り返した際、
       外部リンクアイコンがflexアイテムとして行全体の高さに対して
       中央寄せされてしまい、テキスト末尾（2行目）から離れて右端に
       孤立して見える不具合があった。SPのみdisplay:blockに切り替え、
       アイコン／テキスト／外部リンクアイコンを通常のインライン
       フローで並べることで、テキストの折り返しに追従してアイコンが
       文末に付くようにする（PC側のflex中央揃えは維持のため変更なし）。 */
    display: block;
    margin-top: 1.4rem;
    font-size: 1.4rem;
    width: auto;
    /* [2026-09-16 追加修正] 2行目（折り返し後）の開始位置を、1行目の
       アイコン後のテキスト開始位置に揃えるハンギングインデント。
       padding-leftでコンテンツ開始位置をアイコン分右にずらした上で、
       アイコン自身だけ同じ幅を負のmargin-leftで押し戻して左端に
       表示する（下のharassment-icon側のmargin-left/-rightとセットで
       機能する。値はアイコン幅2rem（未上書きのためベースの
       .p-career-recruit__harassment-iconを継承）＋アイコンとテキストの
       間隔0.6rem＝2.6rem）。font-size等、直近でご自身が調整された値は
       変更していない。 */
    padding-left: 2.6rem;
  }
}

.p-career-recruit__harassment:hover {
  text-decoration-color: currentColor;
}

.p-career-recruit__harassment-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__harassment-icon {
    display: inline-block;
    /* 上の.p-career-recruit__harassmentのpadding-leftと対になるハンギング
       インデント処理。margin-left（-(アイコン幅2rem+間隔0.6rem)）で
       アイコンを左端まで押し戻し、margin-right（0.6rem）でテキストとの
       間隔を確保する。2つの合計がアイコン幅とちょうど打ち消し合う
       （-2.6rem + 2rem + 0.6rem = 0rem）ため、1行目のテキスト開始位置も
       2行目の折り返し開始位置も同じpadding-left基準点（2.6rem）に揃う。 */
    margin-left: -2.6rem;
    margin-right: 0.6rem;
  }
}

.p-career-recruit__harassment-text {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2rem;
  transition: text-decoration-color 0.2s ease;
}

@media only screen and (max-width: 768px) {
  .p-career-recruit__harassment-text {
    display: inline;
  }
}

.p-career-recruit__harassment:hover .p-career-recruit__harassment-text {
  text-decoration-color: currentColor;
}

.p-career-recruit__harassment-external {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__harassment-external {
    display: inline-block;
    width: 2rem;
    height: 2rem;
  }
}

/* --------------------------------------------------------------------
   Recruit Table (採用情報)
   -------------------------------------------------------------------- */
/* このテーブル部分だけ背景色がRecruit本体
   （--career-bg-alt）と異なる薄い青(#E3ECFF)のため、Recruitセクションから
   分離して独立したセクションとして実装。背景を画面幅いっぱいに敷いた上で、
   白いカード状のテーブルを中央に配置。padding値はデザイン（背景と
   カードの間の余白）の実測に基づく。 */
.p-career-recruit-table {
  background: #e3ecff;
  padding: 11rem 0;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit-table {
    padding: 1.6rem 0;
  }
}

/* 「募集職種」等WP管理項目のテーブルは、Recruitセクション本体
   （中身1138px）とは別に中身1280px・左右32px。親の
   .p-career-recruit-tableの幅制約から独立してビューポート基準で
   break outさせ、中身1280px+左右32pxパディング=合計1344px(134.4rem)を
   上限に中央揃えしている。calc(100% - 6.4rem)によりビューポートが
   1344pxより狭い場合も常に左右32pxの余白を確保する。これが無いと、親
   .p-career-recruit-table自体に左右パディングが無いビューポート幅
   1280px未満の領域でカードが画面端まで達してしまう（他セクションの
   左右32pxパディングと不揃いになる）。 */
.p-career-recruit__table {
  width: calc(100% - 6.4rem);
  max-width: 128rem;
  background: #fff;
  box-sizing: border-box;
  /* 実測したところ、真のSP幅
     （375px等）では左右合計442px超の固定paddingがボックス
     （box-sizing:border-boxのためcontent領域を圧迫）を上回り、テーブル
     内のテキストが縦一列に文字ごと折り返される致命的な表示崩れを起こして
     いた。左右
     padding（22.2rem/22rem→SP時2.4rem）・上下padding（12rem→SP時4rem）を
     1344px(--inner-max-width 128rem+左右32px)〜768pxでfluid clampに
     変更し、768px以下は明示的にSP値を固定（他箇所と同じ安全策）。 */
  padding: clamp(4rem, -6.6667rem + 13.8889vw, 12rem) clamp(2.4rem, -23.7333rem + 34.0278vw, 22rem) clamp(4rem, -6.6667rem + 13.8889vw, 12rem) clamp(2.4rem, -24rem + 34.375vw, 22.2rem);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__table {
    padding: 3.3rem 3.2rem 4.2rem;
    width: calc(100% - 3.2rem);
  }
}

/* career_jobs（採用情報一覧）に複数件登録されている場合、.p-career-recruit__table
   （白背景カード）が件数ぶんそのまま縦に並ぶ。カード同士の境目が分かるよう、
   2枚目以降にだけ上マージンを追加している。 */
.p-career-recruit__table + .p-career-recruit__table {
  margin-top: 4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__table + .p-career-recruit__table {
    margin-top: 2.4rem;
  }
}

/* career_jobsが0件の場合の空表示（「現在募集している職種はございません。」）。
   通常時の.p-career-recruit__row-value相当のフォントサイズで、カード中央に
   1行だけ表示する。 */
.p-career-recruit__empty {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__empty {
    font-size: 1.4rem;
  }
}

/* 「募集要項」見出し（2026-09-16追加）。career_jobsの1件＝1つの
   .p-career-recruit__table（白カード）に対応するため、カードごとに
   見出しとして表示する。 */
.p-career-recruit__table-heading {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__table-heading {
    font-size: 1.6rem;
  }
}

.p-career-recruit__row {
  display: flex;
  gap: 4rem;
  padding: 2.6rem 0;
  border-bottom: 1px solid #c7c7c7;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__row {
    flex-direction: column;
    gap: 0;
    padding: 2.4rem 0 0.7rem;
  }
}

.p-career-recruit__row:first-child {
  padding-top: 0;
}

.p-career-recruit__row-label {
  flex: none;
  width: 16rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--career-grad-start);
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__row-label {
    width: auto;
    font-size: 1.5rem;
  }
}

.p-career-recruit__row-value {
  flex: 1;
  color: #000;
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .p-career-recruit__row-value {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------
   Entry
   -------------------------------------------------------------------- */
.p-career-entry {
  background: #f8f8f8;
  padding: 14rem 0 12.7rem;
  text-align: center;
  /* 中身520px+左右
     32pxパディング=max-width 584px(58.4rem)に上書き。 */
  --inner-max-width: 58.4rem;
  --inner-padding-x: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .p-career-entry {
    padding: 4rem 0 5.2rem;
  }
}

.p-career-entry .p-career-secttl {
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-entry .p-career-secttl {
    margin-bottom: 0;
  }
}

.p-career-entry .p-career-secttl__en {
  line-height: 1;
}

.p-career-entry .p-career-secttl__en .p-career-splittext__char {
  padding-bottom: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .p-career-entry .p-career-secttl__en .p-career-splittext__char {
    padding-bottom: 0.8rem;
  }
}

.p-career-entry .p-career-secttl__ja {
  margin-bottom: 0;
  margin-top: 0;
}

.p-career-entry__txt {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .p-career-entry__txt {
    margin-top: 0;
    font-size: 1.4rem;
  }
}

.p-career-entry__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2rem;
  background: var(--career-blue);
  font-weight: 700;
  font-size: 2rem;
  padding: 2.8rem 4.8rem;
  border-radius: 0.4rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-career-entry__btn {
    font-size: 1.4rem;
    padding: 1.8rem 4.8rem;
  }
}

/* 右側の矢印は擬似要素(::after)で実装。ボタンがdisplay:flexのため
   ::afterはテキストの後ろに続く3つ目の
   flexアイテムとして自動配置され、gapで間隔・align-items:centerで縦位置が
   揃う（絶対配置不要）。サイズ・太さ・左右の余白(margin-left)はここで
   個別に調整できる。 */
.p-career-entry__btn::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.22rem 0.22rem 0 0;
  transform: rotate(45deg) translateX(-50%);
  margin-left: -0.2rem;
  position: absolute;
  top: 50%;
  right: 3.4rem;
}
@media only screen and (max-width: 768px) {
  .p-career-entry__btn::after {
    right: 2.4rem;
  }
}

/* .p-career a { color: inherit; } (詳細度0,1,1) がボタン単体クラス指定
   (0,1,0)より強く、白文字が効かず地の紺色になっていたため、親要素を含めた
   セレクタで詳細度を上げて確実に白文字にする。 */
.p-career-entry .p-career-entry__btn {
  color: #fff;
}

/* --------------------------------------------------------------------
   フッター（parts/career-footer.php）
   -------------------------------------------------------------------- */
.p-career-footer {
  background: var(--career-navy);
  color: #fff;
  padding: 2.5rem 0;
}
@media only screen and (max-width: 768px) {
  .p-career-footer {
    padding: 2.3rem 0 1.1rem;
  }
}

/* リファレンス画像実測: ロゴ＋タグラインが左、Copyrightが右の同一行に
   横並び（PCのみ）。SPは中央揃えで縦積みに変える（SP側メディアクエリ参照）。 */
.p-career-footer__inner {
  max-width: 1344px;
  width: 100%;
  padding: 0 3.2rem;
  margin: 0 auto;
  /* 1280px時4rem/768px時2rem（左右）を補間するfluid clamp。 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  /* Footer SP: リファレンス画像の通り、中央揃えで縦積み（ロゴ→タグライン→Copyright）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-footer__inner {
    display: block;
    gap: 0.9rem;
    padding: 0 1.6rem;
  }
}

.p-career-footer__brand {
  max-width: 16rem;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-career-footer__brand {
    max-width: 8.4rem;
    margin: 0 auto;
  }
}

.p-career-footer__logo {
  width: 12rem;
}

.p-career-footer__tagline {
  font-size: 1rem;
  margin-top: 0.4rem;
  opacity: 0.8;
}

.p-career-footer__copyright {
  /* 1280px時1.1rem/768px時1remを補間するfluid clamp（SP側での上書き不要）。 */
  font-size: 1.2rem;
  opacity: 0.8;
}
@media only screen and (max-width: 768px) {
  .p-career-footer__copyright {
    font-size: 0.8rem;
    margin-top: 0.9rem;
  }
}

/* --------------------------------------------------------------------
   追従ボタン（ページトップへ戻る）
   -------------------------------------------------------------------- */
.p-career-followbtn-wrap {
  position: relative;
  height: 0;
}

/* .p-career button { background:none; } という共通リセット（詳細度0,1,1）が
   単体クラス指定（0,1,0）より強く効いてしまうため、.p-careerを含めたセレクタ
   で詳細度を上げてnavy背景を確実に効かせる。 */
.p-career .p-career-followbtn {
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  width: 5.6rem;
  height: 5.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--career-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
}
@media only screen and (max-width: 768px) {
  .p-career .p-career-followbtn {
    width: 4rem;
    height: 4rem;
    right: 1.6rem;
  }
}
.p-career .p-career-followbtn svg {
  transition: stroke 0.2s;
}

/* @media (hover: hover)は「ホバー操作が
   本当に可能なデバイスか」を判定するfeature query（マウス等のポインタ
   デバイス向け。指でタップするタッチデバイスはhover: noneと評価される）。
   これで包むことで、SPでタップした際に:hoverスタイルがタップ後も
   貼り付いたまま（いわゆる「スタッキーホバー」）残ってしまう問題を防ぎつつ、
   PCではマウスホバー時だけ反転させられる。背景（navy→白）とアイコン
   （white→navy、svgのstroke属性はCSSのstrokeプロパティで上書き可能）を
   両方反転。 */
@media (hover: hover) {
  .p-career .p-career-followbtn:hover {
    background: #fff;
    border: 2px solid var(--career-navy);
  }
  .p-career .p-career-followbtn:hover svg {
    stroke: var(--career-navy);
  }
}
/* 注意: 上の .p-career .p-career-followbtn（詳細度0,2,0）より下のSP上書きは
   あえて .p-career を含めない .p-career-followbtn 単体（詳細度0,1,0）にして
   ある。.p-career を付けると詳細度が上のベース指定と同じ0,2,0になり、
   ソース順で「後」になるぶんSP上書きが常に勝ってしまうが、既存の本番CSSでは
   詳細度0,1,0のまま（＝ベースの0,2,0に負けて実質無効）という挙動になって
   いるため、それに合わせている。将来ここを「直す」場合は意図した変更として
   周知すること。 */
.p-career-followbtn {
  /* 追従ボタン SP: 画面端に少し寄せてサイズを少し小さく（現状は上のベース指定に
     詳細度で負けて適用されない状態のまま、既存挙動を維持）。 */
}
@media only screen and (max-width: 768px) {
  .p-career-followbtn {
    width: 4.8rem;
    height: 4.8rem;
    right: 1.6rem;
    bottom: 1.6rem;
  }
}

.p-career-followbtn.is-visible {
  opacity: 1;
  visibility: visible;
}

/* career.jsがフッターの交差を検知するとこのクラスを付与し、fixed→absoluteに
   切り替えてフッターの少し上で止める（フッター本文に重ならないようにする）。 */
.p-career-followbtn.is-stuck {
  position: absolute;
  top: -9.6rem;
  right: 4rem;
  bottom: auto;
}
@media only screen and (max-width: 768px) {
  .p-career-followbtn.is-stuck {
    top: -5rem;
    right: 1.6rem;
  }
}

/* --------------------------------------------------------------------
   未対応セクションへのスタガー/個別フェードイン
   career.js側のinitGroupStaggerReveal/initIndividualRevealが対象要素に
   js-animate-init→is-visibleの順でクラスを付与するタイミングを管理し、
   ここではその見た目（非表示状態と出現アニメーション本体）だけを定義する。
   既存の.p-career-mv__ttl等と全く同じ設計（非表示状態はtransition: none、
   実際のtransitionは.is-visible側にだけ書く）を踏襲。
   -------------------------------------------------------------------- */
/* Strengths: リング一式（背景リングとアイコン3つ）が少し遅れて中央から
   ポップインする。.p-career-strengths__rings-iconは既に
   transform: translate(-50%, -50%) で中央寄せ配置しているため、上書きせず
   scale()を combine して追加する（さもないと中央配置が崩れる）。 */
.p-career-strengths__rings-bg.js-animate-init {
  opacity: 0;
  transform: scale(0.92);
  transition: none;
}

.p-career-strengths__rings-bg.js-animate-init.is-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-career-strengths__rings-icon.js-animate-init {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: none;
}

.p-career-strengths__rings-icon.js-animate-init.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 1.05s cubic-bezier(0.3, 1.3, 0.4, 1), transform 1.05s cubic-bezier(0.3, 1.3, 0.4, 1);
}

/* Recruit: 「Our Strengths」のリングと全く同じ構造・演出。
   p-career-recruit__rings-iconも同じく
   transform: translate(-50%, -50%) で中央寄せ配置しているため、上と同様に
   scale()をcombineする。 */
.p-career-recruit__rings-bg.js-animate-init {
  opacity: 0;
  transform: scale(0.92);
  transition: none;
}

.p-career-recruit__rings-bg.js-animate-init.is-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-career-recruit__rings-icon.js-animate-init {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: none;
}

.p-career-recruit__rings-icon.js-animate-init.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 1.05s cubic-bezier(0.3, 1.3, 0.4, 1), transform 1.05s cubic-bezier(0.3, 1.3, 0.4, 1);
}

/* Strengths: 3項目リストが下から時間差でフェードイン。 */
.p-career-strengths__list > li.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-career-strengths__list > li.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Interview: 3カードが下から時間差でフェードイン。 */
.p-career-interview__card.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-career-interview__card.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Company: メイン写真は単独で、3枚のサブ写真は時間差でフェードイン。 */
.p-career-company__img.js-animate-init {
  opacity: 0;
  transform: translateY(3rem);
  transition: none;
}

.p-career-company__img.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-career-company__sub-img.js-animate-init {
  opacity: 0;
  transform: translateY(2rem) scale(0.96);
  transition: none;
}

.p-career-company__sub-img.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1), transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Environment: 研修写真2枚（各ブロックごとに独立して発火）と、
   福利厚生カード4枚（時間差）。 */
.p-career-environment__flex-img.js-animate-init {
  opacity: 0;
  transform: translateY(3rem);
  transition: none;
}

.p-career-environment__flex-img.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-career-environment__benefit-card.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-career-environment__benefit-card.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Job: 4カードが時間差でフェードイン。 */
.p-career-job__card.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-career-job__card.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Numbers: 9つの数字(.p-career-numbers__card-value)だけが時間差で下から
   ふわっとフェードイン。ラベル・アイコンは常時表示のまま動かさない。
   カードの他の要素(.js-animate-init)を巻き込まないよう
   translateYの移動量も2.4rem→1.6remに少し控えめにし、数字単体の動きとして
   自然な範囲に収めている。 */
.p-career-numbers__card-value.js-animate-init {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: none;
}

.p-career-numbers__card-value.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 背景装飾ブロブ画像（5セクション共通）が画面に入ったら
   ぼかし(blur)込みでじわっと現れる。transformは
   career.js側のパララックス処理（常時rAFループ）が別途継続的に上書きする
   ため、ここではopacity/filterのみをアニメーションさせて競合を避けている。
   所要時間は他の演出より長め(1.6s)にして、じわっと滲むような速度にした。 */
.p-career-strengths__bg-img.js-animate-init,
.p-career-interview__bg-img.js-animate-init,
.p-career-company__bg-img.js-animate-init,
.p-career-environment__bg-img.js-animate-init,
.p-career-recruit__bg-img.js-animate-init {
  opacity: 0;
  filter: blur(2.4rem);
  transition: none;
}

.p-career-strengths__bg-img.js-animate-init.is-visible,
.p-career-interview__bg-img.js-animate-init.is-visible,
.p-career-company__bg-img.js-animate-init.is-visible,
.p-career-environment__bg-img.js-animate-init.is-visible,
.p-career-recruit__bg-img.js-animate-init.is-visible {
  opacity: 1;
  filter: blur(0);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), filter 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------
   ホバー微アニメーション（ボタン・リンク）
   エントリー系ボタンとInterviewカードにホバー時の控えめな動きを追加。
   既存の色・レイアウトルールは変更せず、transition/transform/box-shadow
   のみを追加する。
   -------------------------------------------------------------------- */
.p-career-header__entry {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/* .p-career-header .p-career-header__entryは.p-career a{color:inherit}を
   上書きするための既存の詳細度エレベート済みセレクタ（上部参照）なので、
   ホバー側もそれに揃えて同じ詳細度で上書きする。 */
.p-career-header .p-career-header__entry:hover {
  transform: translateY(-0.2rem);
  background: #fff;
  color: var(--career-blue);
  outline: 0.2rem solid var(--career-blue);
  outline-offset: -0.2rem;
}

.p-career-header__sp-entry {
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.p-career-header .p-career-header__sp-entry:hover {
  transform: translateY(-0.1rem);
  background: #fff;
  color: var(--career-blue);
  outline: 0.2rem solid var(--career-blue);
  outline-offset: -0.2rem;
}

.p-career-entry__btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.p-career-entry__btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 0.8rem 2rem rgba(0, 31, 106, 0.25);
}

/* 地の紺(--career-blue)＋白文字を、
   ホバー時は白地＋紺文字に反転する。outline（border ではなく）を使うことで
   ボックスサイズを変えずに縁取りを付け、ホバー時にボタンの寸法が変わらない
   ようにしている（outline-offsetをマイナスにして内側に重ねて描画）。
   .p-career-entry .p-career-entry__btn は.p-career a{color:inherit}を
   上書きするために詳細度を上げた既存のセレクタ（上のコメント参照）なので、
   ホバー側も同じ詳細度で上書きする。矢印(::after)の色も文字色と同じく
   白→紺に反転させないと、白地の上で見えなくなってしまうため合わせて反転。 */
.p-career-entry .p-career-entry__btn:hover {
  background: #fff;
  color: var(--career-blue);
  outline: 0.2rem solid var(--career-blue);
  outline-offset: -0.2rem;
}

.p-career-entry__btn:hover::after {
  border-color: var(--career-blue);
}

/* Interviewカード: ホバーで写真がわずかにズームし、右下の丸バッジが
   右へ少しずれて色が濃くなる（「もっと見る」への視線誘導）。 */
.p-career-interview__card-img img {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.p-career-interview__card:hover .p-career-interview__card-img img {
  transform: scale(1.06);
}

.p-career-interview__card-more-icon {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.p-career-interview__card:hover .p-career-interview__card-more-icon {
  background: var(--career-blue);
  transform: translateX(0.3rem);
}

/* --------------------------------------------------------------------
   出現アニメーション: prefers-reduced-motion 対応（共通・全アニメーション）
   -------------------------------------------------------------------- */
/* アクセシビリティ対応に加えて、ページのコードを一切
   変更せず、Chrome DevToolsのRenderingパネルで「Emulate CSS media feature
   prefers-reduced-motion」→「reduce」を選択するだけで、下記の出現アニメー
   ション（FV／セクションタイトル／採用ステップ）を全て即時オフにできる
   （本番でもOS側の「視差効果を減らす」等の設定で自動的に同じ効果になる）。

   [重要] 詳細度に注意: .is-visible側の各アニメーション本体ルールは
   （例: .p-career-mv__ttl.js-animate-init.is-visible）詳細度0,3,0で
   transitionを指定しているため、それを打ち消すにはこちらも同じ詳細度の
   セレクタで .is-visible 側を上書きする必要がある（.js-animate-initだけの
   セレクタ＝詳細度0,2,0でtransition:noneを書いても、後から評価される
   .is-visible側の0,3,0ルールに負けて無効化されない）。followbtnの
   SP上書きで実際に踏んだのと同種の落とし穴なので、ここでは意図的に
   is-visible側と非is-visible側の両方を、それぞれ同じ詳細度で上書きしている。 */
@media (prefers-reduced-motion: reduce) {
  .p-career-mv__ttl.js-animate-init,
  .p-career-mv__lead.js-animate-init,
  .p-career-header.js-animate-init,
  .p-career-recruit__step-flow.js-animate-init .p-career-recruit__step-item,
  .p-career-recruit__step-flow.js-animate-init .p-career-recruit__step-item-text,
  .p-career-strengths__rings-bg.js-animate-init,
  .p-career-strengths__list > li.js-animate-init,
  .p-career-interview__card.js-animate-init,
  .p-career-company__img.js-animate-init,
  .p-career-company__sub-img.js-animate-init,
  .p-career-environment__flex-img.js-animate-init,
  .p-career-environment__benefit-card.js-animate-init,
  .p-career-job__card.js-animate-init,
  .p-career-numbers__card-value.js-animate-init,
  .p-career-recruit__rings-bg.js-animate-init {
    opacity: 1;
    transform: none;
  }
  /* リングアイコンのみ中央寄せのtransform: translate(-50%, -50%)を維持したまま
     scale()だけ打ち消す必要があるため、上のグループとは別に指定する。 */
  .p-career-strengths__rings-icon.js-animate-init,
  .p-career-recruit__rings-icon.js-animate-init {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  /* 背景装飾ブロブ画像はtransformを持たないため、上の2グループとは別に
     opacity/filterだけを打ち消す。 */
  .p-career-strengths__bg-img.js-animate-init,
  .p-career-interview__bg-img.js-animate-init,
  .p-career-company__bg-img.js-animate-init,
  .p-career-environment__bg-img.js-animate-init,
  .p-career-recruit__bg-img.js-animate-init {
    opacity: 1;
    filter: blur(0);
  }
  .p-career-mv__ttl.js-animate-init.is-visible,
  .p-career-mv__lead.js-animate-init.is-visible,
  .p-career-header.js-animate-init.is-visible,
  .p-career-recruit__step-flow.js-animate-init.is-visible .p-career-recruit__step-item,
  .p-career-recruit__step-flow.js-animate-init.is-visible .p-career-recruit__step-item-text,
  .p-career-strengths__rings-bg.js-animate-init.is-visible,
  .p-career-strengths__rings-icon.js-animate-init.is-visible,
  .p-career-strengths__list > li.js-animate-init.is-visible,
  .p-career-interview__card.js-animate-init.is-visible,
  .p-career-company__img.js-animate-init.is-visible,
  .p-career-company__sub-img.js-animate-init.is-visible,
  .p-career-environment__flex-img.js-animate-init.is-visible,
  .p-career-environment__benefit-card.js-animate-init.is-visible,
  .p-career-job__card.js-animate-init.is-visible,
  .p-career-numbers__card-value.js-animate-init.is-visible,
  .p-career-recruit__rings-bg.js-animate-init.is-visible,
  .p-career-recruit__rings-icon.js-animate-init.is-visible,
  .p-career-strengths__bg-img.js-animate-init.is-visible,
  .p-career-interview__bg-img.js-animate-init.is-visible,
  .p-career-company__bg-img.js-animate-init.is-visible,
  .p-career-environment__bg-img.js-animate-init.is-visible,
  .p-career-recruit__bg-img.js-animate-init.is-visible {
    transition: none;
  }
  /* セクションタイトルの1文字ずつマスク演出（.p-career-splittext__char）は
   .js-animate-initゲートを持たず常に初期状態がopacity:0/translateY(110%)
   のため、他要素とは別に単独でopacity:1/transform:noneに上書きする。 */
  .p-career-splittext__char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}