@charset "UTF-8";

/* ========================================
   learning.css
   教育制度ページ専用スタイル
   設計幅: PC 1920px（Figma 54-25585 営業 / 54-26803 整備士 / 54-26457 事務）
           SP 640px（Figma 54-36380）
   ・PC: clamp(最小, vw(=px/19.2), Figma実寸) の流体スケール。
     1025px 以上は各セクション内側に zoom 0.81（about/message/question と同手法）。
   ・1024px 以下はスマホ設計(640px)を vw 連動（値÷6.4）+ max() の px 床で
     相似形のまま縮小（know ヒーローと同手法）。
   ・カード類の白カード＋色付き影プレートは about-card の ::before 方式を踏襲。
======================================== */

.learning {
  --lp-red: #f75959;        /* テーマ赤（帯・プレート・見出し） */
  --lp-ink: #212121;        /* 枠線・見出し墨色 */
  --lp-ink-warm: #231815;   /* ステップ行の見出し */
  --lp-text: #2c2c2c;       /* 本文 */
  --lp-pink-bg: #fdd0d0;    /* 「日産ならではの学び」帯 */
  --lp-pink-bg-light: #fdddde; /* NEXT セクション帯（Figma #FDDDDD） */
  /* ★2026-08-07 C-4: 薄いピンクは白・淡ピンク地でコントラスト1.35〜2.03しかなく読みにくかった。
     大きな文字の目安3.0を超える範囲で、サイトのテーマ赤に寄せて濃くした（跡田さん選択・控えめ案）*/
  --lp-pink-soft: #f75959;  /* カードのサブコピー（旧 #ff9a9a・2.03→3.22）*/
  --lp-pink-deco: #ea4a4a;  /* #STEP 飾り文字（旧 #fcc7c7・1.46→3.70）*/
  --lp-pink-next: #e04545;  /* NEXT 飾り文字（旧 #ffb2b2・1.35→3.25）*/
  --lp-road: #595959;

  background-color: #fffdf4;
  overflow-x: clip;         /* NEXT の吹き出しがカード外へはみ出すため */
}

/* 英字飾り（#STEP / NISSAN / NEXT）は欧文フォント */
.learning-steps-label,
.learning-heading-en {
  font-family: var(--font-family-en);
}

/* スクリーンリーダー用（バンドの年次をタイトルへ補足）の .u-visually-hidden は
   ★2026-08-14 に base.css の共通ユーティリティへ移動（他ページでも使うため）*/

/* ============================================================
   Hero（赤帯＋タイトル＋道路＋キャッチ＋リード＋右上写真）
============================================================ */
.learning-hero {
  position: relative;
  z-index: 0;
}
.learning-hero-band {
  height: clamp(96px, 8.75vw, 168px);            /* Figma 168px */
  background-color: var(--lp-red);
}
/* 道路（about / message / question と同手法） */
.learning-hero-road {
  position: relative;
  height: clamp(22px, 2.084vw, 40px);            /* Figma 40px */
  background-color: var(--lp-road);
}
.learning-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(2px, 0.21vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}

/* タイトル「教育制度」= 支給画像。帯下端と道路に跨る。
   ★2026-08-20 CSSテキスト近似から画像へ差し替え（跡田さん選択＝案A「いまと同じ大きさ」）。
   幅は差し替え前の文字と同じ見え方になる値にしてある（1920pxで504px＝旧フォント120px相当）。
   位置は動かしていない。このヒーローは右上に写真・下にキャッチ文があり、中央寄せにすると写真に、
   下げるとキャッチ文に重なるため、動かせる余地がない（4案を実際に当てて実測で確認）。
   transform は -55%→-52%。旧値は「文字の箱」基準だったが、画像は透明な余白を切り落としてあり
   中身の中心＝画像の中心になるため、帯下端に中心を合わせる値へ寄せた。
   360〜1920px の11通りの幅で、写真ともキャッチとも重ならないことを実測済み。 */
.learning-hero-title {
  position: absolute;
  left: 8.18%;                                   /* Figma x157 */
  top: clamp(96px, 8.75vw, 168px);               /* = 帯下端 */
  z-index: 2;
  margin: 0;
  transform: translateY(-52%);
  line-height: 0;
}
.learning-hero-title-img {
  display: block;
  width: clamp(141px, 26.25vw, 504px);           /* 1920pxで504px＝差し替え前と同じ幅 */
  height: auto;
}

/* 右上写真（角丸は左下のみ） */
.learning-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  width: clamp(300px, 47.92vw, 920px);           /* Figma 920px */
  line-height: 0;
}
.learning-hero-photo img {
  width: 100%;
  aspect-ratio: 920 / 515;
  object-fit: cover;
  border-bottom-left-radius: clamp(40px, 4.17vw, 80px);
}

/* キャッチ＋リード（左カラム） */
.learning-hero-body {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 3.96vw, 76px) 0 clamp(24px, 2vw, 38px) 8.18%;
  max-width: 52%;
  box-sizing: border-box;
}
.learning-hero-catch {
  margin: 0;
  color: var(--lp-ink);
  font-size: clamp(2rem, 2.865vw, 5.5rem);       /* Figma 55px */
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.learning-hero-lead {
  margin-top: clamp(10px, 0.89vw, 17px);
  color: var(--lp-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);     /* Figma 25px */
  line-height: 2;
}
.learning-hero-lead p {
  margin: 0;
}

/* ============================================================
   STEP（研修の流れ 3 カード）
============================================================ */
.learning-steps {
  margin-top: clamp(24px, 2.34vw, 45px);
}
.learning-steps-inner {
  position: relative;
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}
/* #STEP 飾り（縦読み・薄赤） */
.learning-steps-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-108%);
  color: var(--lp-pink-deco);
  font-size: clamp(2rem, 2.6vw, 5rem);           /* Figma 50px */
  letter-spacing: 0.025em;
  line-height: 1.2;
  writing-mode: vertical-rl;
}
.learning-steps-list {
  position: relative;
  z-index: 0;                                    /* カードの影プレート(z:-1)の受け皿 */
  display: flex;
  gap: clamp(28px, 2.76vw, 53px);
  margin: 0 0 0 clamp(30px, 3.13vw, 60px);       /* Figma: 左端157→カード217 */
  padding: 0;
  list-style: none;
}
.learning-step {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-top: clamp(36px, 3.33vw, 64px);        /* タグの載る領域 */
}
/* カード間の右向き矢印 */
.learning-step + .learning-step::before {
  content: "";
  position: absolute;
  top: calc(50% + clamp(16px, 1.67vw, 32px));
  left: calc(-1 * clamp(14px, 1.38vw, 26.5px));
  width: clamp(20px, 1.875vw, 36px);
  height: clamp(20px, 1.875vw, 36px);
  transform: translate(-50%, -50%);
  background-color: var(--lp-ink);
  clip-path: polygon(0 6.7%, 100% 50%, 0 93.3%); /* Figma 多角形14（右向き） */
}
/* タグ（入社後すぐ 等）: 赤の角丸＋下向きしっぽ（黒フチ＋赤の2枚重ね） */
.learning-step-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: clamp(4px, 0.36vw, 7px) clamp(16px, 1.46vw, 28px);
  background-color: var(--lp-red);
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  color: #fff;
  font-size: clamp(1.4rem, 1.563vw, 3rem);       /* Figma 30px */
  letter-spacing: 0.05em;
  line-height: 1.55;
  white-space: nowrap;
}
.learning-step-tag::before,
.learning-step-tag::after {
  content: "";
  position: absolute;
  left: clamp(14px, 1.35vw, 26px);
  width: 0;
  height: 0;
  border-style: solid;
}
.learning-step-tag::before {                     /* 黒フチ側 */
  bottom: calc(-1 * clamp(10px, 0.94vw, 18px));
  border-width: clamp(10px, 0.94vw, 18px) clamp(5px, 0.47vw, 9px) 0;
  border-color: var(--lp-ink) transparent transparent;
}
.learning-step-tag::after {                      /* 赤の内側 */
  bottom: calc(-1 * clamp(5px, 0.52vw, 10px));
  left: calc(clamp(14px, 1.35vw, 26px) + clamp(2px, 0.16vw, 3px));
  border-width: clamp(6px, 0.63vw, 12px) clamp(3px, 0.31vw, 6px) 0;
  border-color: var(--lp-red) transparent transparent;
}
/* カード本体（白＋黒枠）＋ 赤い影プレート */
.learning-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 8.49vw, 163px);        /* Figma 163px */
  padding: clamp(10px, 1.04vw, 20px) clamp(8px, 0.83vw, 16px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(20px, 2.084vw, 40px);
  box-sizing: border-box;
}
.learning-step-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * clamp(2px, 0.16vw, 3px));
  transform: translateY(clamp(6px, 0.52vw, 10px));
  background-color: var(--lp-red);
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(20px, 2.084vw, 40px);
  box-sizing: border-box;
}
.learning-step-name {
  margin: 0;
  color: var(--lp-red);
  font-size: clamp(1.8rem, 2.6vw, 5rem);         /* Figma 50px */
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
}
.learning-step-sub {
  margin: clamp(4px, 0.42vw, 8px) 0 0;
  color: var(--lp-text);
  font-size: clamp(1.3rem, 1.563vw, 3rem);       /* Figma 30px */
  line-height: 1.4;
  text-align: center;
}

/* ============================================================
   共通: セクション見出し（英字飾り＋白箱＋赤プレート）とリード
============================================================ */
.learning-heading {
  position: relative;
  z-index: 0;
  text-align: center;
}
.learning-heading-en {
  display: block;
  margin-bottom: clamp(6px, 0.73vw, 14px);
  font-size: clamp(2rem, 2.6vw, 5rem);           /* Figma 50px */
  letter-spacing: 0.025em;
  line-height: 1;
}
.learning-heading-en--nissan {
  /* ★2026-08-07 C-4: 淡ピンク帯(#fdd0d0)に白文字でコントラスト1.39しかなく、ほぼ見えなかった。
     帯の色はFigmaどおり残し、文字だけ墨色にして読めるようにした（11.0・跡田さん選択）*/
  color: var(--lp-ink);
}
.learning-heading-en--next {
  color: var(--lp-pink-next);
}
.learning-heading-box {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: clamp(14px, 1.38vw, 26.5px) clamp(24px, 2.084vw, 40px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
}
.learning-heading-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * clamp(2px, 0.16vw, 3px));
  transform: translateY(clamp(5px, 0.52vw, 10px));
  background-color: var(--lp-red);
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  box-sizing: border-box;
}
.learning-heading-box .f-dela {
  color: var(--lp-red);
  font-size: clamp(2.6rem, 4.17vw, 8rem);        /* Figma 80px */
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
.learning-section-lead {
  margin: clamp(14px, 1.2vw, 23px) 0 0;
  color: var(--lp-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);     /* Figma 25px */
  line-height: 2;
  text-align: center;
}

/* ============================================================
   日産ならではの学び（ピンク帯＋カード3枚）
============================================================ */
.learning-nissan {
  margin-top: clamp(30px, 3vw, 57px);
  padding: clamp(20px, 1.56vw, 30px) 0 clamp(40px, 3.65vw, 70px);
  background-color: var(--lp-pink-bg);
}
.learning-nissan-inner {
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}
.learning-nissan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.04vw, 20px);
  margin: clamp(16px, 1.4vw, 27px) 0 0;
  padding: 0;
  list-style: none;
}
.learning-nissan-card {
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.04vw, 20px) clamp(12px, 1.04vw, 20px) clamp(18px, 1.56vw, 30px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(20px, 2.084vw, 40px);
  box-sizing: border-box;
}
.learning-nissan-card-photo {
  margin: 0;
  line-height: 0;
}
.learning-nissan-card-photo img {
  width: 100%;
  aspect-ratio: 482 / 320;
  object-fit: cover;
  border: 1px solid var(--lp-ink);
  border-radius: clamp(16px, 1.67vw, 32px);
  box-sizing: border-box;
}
.learning-nissan-card-title {
  margin: clamp(8px, 0.73vw, 14px) 0 0;
  padding-inline: clamp(4px, 0.47vw, 9px);
  color: var(--lp-red);
  font-size: clamp(1.7rem, 2.084vw, 4rem);       /* Figma 40px */
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.learning-nissan-card-sub {
  margin: clamp(2px, 0.21vw, 4px) 0 0;
  padding-inline: clamp(4px, 0.47vw, 9px);
  color: var(--lp-pink-soft);
  font-size: clamp(1.3rem, 1.303vw, 2.5rem);     /* Figma 25px */
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.learning-nissan-card-body {
  margin: clamp(8px, 0.73vw, 14px) 0 0;
  padding-inline: clamp(4px, 0.47vw, 9px);
  color: var(--lp-text);
  font-size: clamp(1.3rem, 1.04vw, 2rem);        /* Figma 20px */
  line-height: 2;
}

/* ============================================================
   職種別の教育ステップ（タブ切替）
============================================================ */
.learning-training {
  margin-top: clamp(40px, 3.65vw, 70px);
}
.learning-training-inner {
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}
/* 職種タブ */
.learning-jobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.04vw, 20px);
  margin-top: clamp(20px, 1.67vw, 32px);
}
.learning-jobs-btn {
  padding: clamp(8px, 1.09vw, 21px) 0;
  background-color: #919191;
  border: 2px solid var(--lp-ink);
  border-radius: clamp(10px, 1.04vw, 20px);
  color: #fff;
  font-size: clamp(1.8rem, 3.13vw, 6rem);        /* Figma 60px */
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.learning-jobs-btn:hover {
  opacity: 0.85;
}
.learning-jobs-btn--sales.is-active  { background-color: var(--lp-red); opacity: 1; }
.learning-jobs-btn--tech.is-active   { background-color: #55baf5; opacity: 1; }
.learning-jobs-btn--office.is-active { background-color: #47d684; opacity: 1; }

/* パネル（職種ごとの内容ボックス） */
.learning-panel {
  margin-top: clamp(12px, 1.04vw, 20px);
  padding: clamp(20px, 1.98vw, 38px) clamp(20px, 2.6vw, 50px) clamp(30px, 3.13vw, 60px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-theme, var(--lp-red));
  border-radius: clamp(12px, 1.04vw, 20px);
}
.learning-panel--sales  { --lp-theme: var(--lp-red); }
.learning-panel--tech   { --lp-theme: #55baf5; }
.learning-panel--office { --lp-theme: #47d684; }

.learning-panel-summary,
.learning-panel-lead {
  margin: 0;
  color: var(--lp-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);     /* Figma 25px */
  line-height: 2;
  text-align: center;
}
.learning-panel-lead {
  margin-top: clamp(14px, 1.25vw, 24px);
}
/* サブセクション見出しバー。
   ★2026-08-23 現在どのパネルも使っていない（事務職の「テクニカルアドバイザー」帯を
   削除したため）。テンプレート側は 'bar' が入れば描画できるので仕組みは残してある */
.learning-panel-bar {
  display: block;
  width: fit-content;
  margin: clamp(24px, 2.4vw, 46px) auto 0;
  padding: clamp(8px, 0.78vw, 15px) clamp(40px, 5.78vw, 111px);
  border: 2px solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  color: #fff;
  font-size: clamp(1.8rem, 2.6vw, 5rem);         /* Figma 50px */
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
}
.learning-panel-bar--green  { background-color: #47d684; }
.learning-panel-bar--yellow { background-color: #ffcd53; }

/* ステップ行 */
.learning-panel-rows {
  margin: clamp(14px, 1.15vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}
/* バンド色（行グループごと。Figma 実測: タブ色より一段濃い専用色） */
.learning-panel-rows--sales { --lp-band: #f75959; }
.learning-panel-rows--tech  { --lp-band: #2daaf4; }
.learning-panel-rows--ta    { --lp-band: #35ce76; }
/* ★2026-08-23 --crew（アンバサダークルーの黄帯）を削除。掲載取りやめで 'band' => 'crew' が
   どこからも指定されなくなったため */

.learning-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 4.69vw, 90px) minmax(0, 1fr) clamp(280px, 27.4vw, 526px);
  column-gap: clamp(20px, 2.34vw, 45px);
  padding: clamp(20px, 2.084vw, 40px) 0;
}
.learning-row + .learning-row {
  border-top: 1px solid var(--lp-ink);
}
/* 左バンド（縦書き年次）。行の下端より少し先へ突き抜け、先端が尖る */
.learning-row-band {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 4.69vw, 90px);
  height: calc(100% + clamp(12px, 1.15vw, 22px));
  padding-bottom: clamp(24px, 2.34vw, 45px);     /* 尖り分を除いた中央へ */
  background-color: var(--lp-band, var(--lp-red));
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - clamp(24px, 2.34vw, 45px)),
    50% 100%,
    0 calc(100% - clamp(24px, 2.34vw, 45px))
  );
  box-sizing: border-box;
}
.learning-row-term {
  color: #fff;
  font-size: clamp(1.8rem, 1.82vw, 3.5rem);      /* Figma 35px */
  letter-spacing: 0.05em;
  line-height: 1.15;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/* ★2026-08-20 「〜」の向きの修正（跡田さん指摘）。
   縦書きバンドで「〜」が横倒しになっていた（PC・スマホとも）。
   原因は回転指定が逆に働いていたこと。この要素は text-orientation: upright の中にあり、
   Chrome はこの指定のとき「〜」を最初から縦向きに描く。そこへ rotate(90deg) をかけていたため、
   わざわざ横向きに戻してしまっていた。回転を外すのが正解。
   ※ text-orientation を mixed に変える方法もあるが、それだと数字の「1」「2」まで
     横倒しになるため採らない。
   対象は「入社1〜2年目」×2・「入社3〜5年目」×2・「入社2〜5年目」×1 の計5行。
   span への分解（learning.php の lp_term）は、今後この字だけ別扱いしたくなったときのために残す。 */
.learning-row-term-tilde {
  display: inline-block;
}
/* 中央テキスト（バンドは absolute のため、グリッド列を明示して配置する） */
.learning-row-main {
  grid-column: 2;
  grid-row: 1;
}
.learning-row-title {
  margin: 0;
  color: var(--lp-ink-warm);
  font-size: clamp(2rem, 2.34vw, 4.5rem);        /* Figma 45px */
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.learning-row-body {
  margin-top: clamp(8px, 0.73vw, 14px);
  color: var(--lp-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);     /* Figma 25px */
  line-height: 2;
}
.learning-row-body p {
  margin: 0;
}
.learning-row-badge {
  display: inline-block;
  width: fit-content;
  margin: clamp(12px, 1.25vw, 24px) 0 0;
  padding: clamp(2px, 0.31vw, 6px) clamp(8px, 0.63vw, 12px);
  background-color: #fff;
  border: 1px solid var(--lp-ink);
  border-radius: clamp(6px, 0.42vw, 8px);
  color: var(--lp-ink-warm);
  font-size: clamp(1.4rem, 1.563vw, 3rem);       /* Figma 30px */
  letter-spacing: 0.05em;
  line-height: 1.4;
}
/* 右写真（未支給の行はグレー枠のみ） */
.learning-row-photo {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  line-height: 0;
}
.learning-row-photo img {
  width: 100%;
  aspect-ratio: 526 / 300;
  object-fit: cover;
  border: 2px solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  box-sizing: border-box;
}
.learning-row-photo--empty {
  aspect-ratio: 526 / 300;
  background-color: #a8a8a8;
  border: 2px solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  box-sizing: border-box;
}

/* ============================================================
   その先につながるもの（NEXT）
============================================================ */
.learning-next {
  position: relative;
  margin-top: clamp(40px, 3.6vw, 69px);
  /* 黄フッターの上角丸の背後にピンクを見せる（footer の透過帯 40px + 角丸分） */
  margin-bottom: calc(-1 * clamp(68px, 7.14vw, 137px));
  padding: clamp(24px, 2.3vw, 44px) 0 calc(clamp(60px, 6.93vw, 133px) + clamp(68px, 7.14vw, 137px));
  background-color: var(--lp-pink-bg-light);
}
/* 上端の切り欠き（クリーム色の下向き三角。Figma 多角形17） */
.learning-next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(90px, 9.9vw, 190px);
  background-color: #fffdf4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.learning-next-inner {
  position: relative;
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}
.learning-next-group {
  /* ★2026-08-20 見出しバー（さらに広がる専門性／力を試せる場）の上の余白を1.5倍へ（跡田さん指示）。
     旧: clamp(20px, 2.08vw, 40px)。1.5倍 → 1.75倍 → 2倍 と段階的に広げた（2026-08-20）。
     上限・下限・傾きすべてを同じ倍率にしているので、どの画面幅でも比率どおりになる
     （1920pxで32→65px・1440pxで24→48px）。
     スマホ側の値は下のレスポンシブ指定にある（そちらも同じ倍率にしてある）。
     さらに広げる場合は、ここと下の値を同じ倍率で掛け直すこと（片方だけ変えない） */
  margin-top: clamp(40px, 4.16vw, 80px);
}
/* 見出しバー（さらに広がる専門性 / 力を試せる場）。カード上端に跨る */
.learning-next-bar {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 0 auto calc(-1 * clamp(28px, 2.92vw, 56px));
  padding: clamp(10px, 0.86vw, 16.5px) clamp(16px, 1.4vw, 27px);
  background-color: var(--lp-red);
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  color: #fff;
  font-size: clamp(2rem, 3.385vw, 6.5rem);       /* Figma 65px */
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}
.learning-next-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.04vw, 20px);
  margin: 0;
  /* ★2026-08-20 PC: 見出しの帯をカードに重ねる（跡田さん選択＝PC案3・深く重ねる）。
     この上余白は帯の「下向きのはみ出し量」と同じ値で打ち消し合っており、結果として
     帯がカードにまったく重なっていなかった（実測 0px）。差し引く分だけ重なりが生まれる。
     引く量は帯の高さの約4割（1440pxで25px／1920pxで33px）。
     ※ 1024px以下は下のレスポンシブ指定で上書きされるため、ここはPC専用として効く */
  padding: calc(clamp(28px, 2.92vw, 56px) - clamp(20px, 2.15vw, 41px)) 0 0;
  padding-inline: 0;
  padding-bottom: 0;
  list-style: none;
}
.learning-next-card {
  position: relative;
  padding: clamp(12px, 1.04vw, 20px) clamp(12px, 1.04vw, 20px) clamp(20px, 1.98vw, 38px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  box-sizing: border-box;
}
.learning-next-card-photo {
  margin: 0;
  line-height: 0;
}
.learning-next-card-photo img {
  width: 100%;
  aspect-ratio: 753 / 400;
  object-fit: cover;
  border: clamp(2px, 0.16vw, 3px) solid var(--lp-ink);
  border-radius: clamp(10px, 0.83vw, 16px);
  box-sizing: border-box;
}
.learning-next-card-title {
  margin: clamp(10px, 1vw, 19px) 0 0;
  color: var(--lp-red);
  font-size: clamp(1.8rem, 2.34vw, 4.5rem);      /* Figma 45px */
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
}
/* ★2026-09-28 題字の下に添える英語名（「（NISSAN Winners Convention）」・跡田さん選択＝案C）。
   題字と同じ大きさで2行目に置くと、1920px で英語名が途中で折れて題字が3行になるため、
   半分の大きさで添える。そのまま半分だとスマホで 8px まで縮むので、本文と同じ 12px を下限にした */
.learning-next-card-title-en {
  display: block;
  margin-top: 0.2em;
  font-size: max(0.5em, 1.2rem);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.learning-next-card-body {
  margin: clamp(6px, 0.5vw, 10px) 0 0;
  padding-inline: clamp(6px, 1.04vw, 20px);
  color: var(--lp-text);
  font-size: clamp(1.3rem, 1.04vw, 2rem);        /* Figma 20px */
  line-height: 2;
}
/* ★2026-09-28 2列で並ぶとき、左右のカードで本文の書き出しの高さを揃える（跡田さん選択＝案C）。
   英語名を添えた側だけ題字が高くなり、隣の本文より 23px（1440px）〜31px（1920px）下がっていた。
   カードを親の行に乗せ（subgrid）、写真・題字・本文の3段を左右で共有させる。題字の低い側には
   その分の余白ができる。吹き出しは絶対配置なので段に数えない（3段＝写真・題字・本文）。
   ・段の間は各要素の margin が作るため、親の縦の gap は 0 にする（残すと段の間が広がる）
   ・subgrid を解釈できない環境では従来どおり（本文の頭がずれるだけで崩れない）
   ・1024px 以下は1列なので揃える必要がなく、効かせない */
@media (min-width: 1025px) {
  @supports (grid-template-rows: subgrid) {
    .learning-next-cards {
      row-gap: 0;
    }
    .learning-next-card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}
/* 吹き出し（テキスト入り支給画像）。カード外側の上角に重なる */
.learning-next-bubble {
  position: absolute;
  z-index: 2;
  width: clamp(100px, 11.15vw, 214px);
  height: auto;
}
.learning-next-bubble--left {
  top: calc(-1 * clamp(14px, 1.6vw, 31px));
  left: calc(-1 * clamp(10px, 2.08vw, 40px));
}
.learning-next-bubble--right {
  top: calc(-1 * clamp(14px, 1.6vw, 31px));
  right: calc(-1 * clamp(10px, 2.08vw, 40px));
}

/* ============================================================
   PC: 1025px 以上は各セクション内側を 0.81 に縮小
   （about / message / question / recruit と同じ手法。ヒーローは等倍）
============================================================ */
@media (min-width: 1025px) {
  .learning-steps-inner,
  .learning-nissan-inner,
  .learning-training-inner,
  .learning-next-inner {
    zoom: 0.81;
  }
}

/* ============================================================
   1024px 以下: スマホ設計（Figma 640px）を vw 連動（値÷6.4）で相似形スケール。
   ≦500px 付近からは max() の px 床が効き、文字の最小サイズを確保する。
============================================================ */
@media (max-width: 1024px) {

  /* ---- Hero ---- */
  .learning-hero-band {
    height: max(43px, 8.59vw);                   /* 55px@640 */
  }
  .learning-hero-road {
    height: max(15px, 3.125vw);                  /* 20px@640 */
  }
  .learning-hero-road::before {
    height: max(1.5px, 0.31vw);
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff 16px,
      transparent 16px,
      transparent 32px
    );
  }
  .learning-hero-title {
    left: max(16px, 4.5vw);                      /* x29@640 */
    top: max(43px, 8.59vw);
  }
  /* ★2026-08-20 スマホ・タブレットは PC と縮み方が違う（旧: font-size 8.59vw）。
     画像でも同じ見え方になるよう、文字の幅に換算した値を入れている */
  .learning-hero-title-img {
    width: max(141px, 36.1vw);                   /* 231px@640・141px@390 = 差し替え前と同じ */
  }
  .learning-hero-photo {
    width: 41.9vw;                               /* 268px@640 */
  }
  .learning-hero-photo img {
    aspect-ratio: 268 / 197;
    border-bottom-left-radius: max(20px, 6.25vw);
  }
  .learning-hero-body {
    max-width: none;
    padding: max(20px, 3.75vw) max(16px, 4vw) max(16px, 3vw) max(16px, 4vw);
  }
  .learning-hero-catch {
    max-width: 55%;                              /* 右上写真を避ける */
    font-size: max(1.7rem, 3.91vw);              /* 25px@640 */
    line-height: 1.5;
  }
  .learning-hero-lead {
    margin-top: max(10px, 2vw);
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
  }

  /* ---- STEP: 縦積み＋下向き矢印 ---- */
  .learning-steps {
    margin-top: max(20px, 4.7vw);
  }
  .learning-steps-inner {
    width: calc(100% - 40px);
  }
  .learning-steps-label {
    position: static;
    display: block;
    margin: 0 0 4px;
    transform: none;
    writing-mode: horizontal-tb;
    font-size: max(1.4rem, 3.91vw);              /* 25px@640 */
  }
  .learning-steps-list {
    flex-direction: column;
    gap: max(26px, 4.4vw);                       /* 矢印の入る間隔 */
    margin-left: 0;
    align-items: center;
  }
  .learning-step {
    width: min(100%, max(300px, 48.13vw));       /* 308px@640 */
    padding-top: max(28px, 6.4vw);               /* タグ領域 41px@640 */
  }
  /* 矢印は下向き・中央。
     ★2026-08-20 位置を「上のカードの影の下端」と「下のカードの上端」のちょうど中間へ
     （跡田さん選択＝案E）。旧値 -13px は上に寄りすぎており、カードの影に1px重なっていた。
     PC は横並びなのでカードの影（下へずれる）が矢印の邪魔をしないが、スマホは縦並びのため
     影が矢印の真上を占めてしまうのが原因。ただし矢印の下には元々33pxも空いていたので、
     カード間を広げる必要はなく、置き直すだけで上下とも15px以上離せる。
     式の中身: 下のカードの上端(padding-top) − カード間(gap) + 影のはみ出し、を2で割った位置。
     すべて画面幅に追従する値なので、どの幅でも同じ割合で中間に来る。 */
  .learning-step + .learning-step::before {
    top: calc((max(28px, 6.4vw) - max(26px, 4.4vw) + max(4px, 0.94vw)) / 2);
    left: 50%;
    width: max(16px, 3.44vw);                    /* 22px@640 */
    height: max(16px, 3.54vw);
    transform: translate(-50%, -50%);
    clip-path: polygon(6.7% 0, 93.3% 0, 50% 100%);  /* 下向き */
  }
  .learning-step-tag {
    padding: max(2px, 0.63vw) max(10px, 2.8vw);
    border-width: 2px;
    border-radius: max(10px, 2.2vw);
    font-size: max(1.2rem, 2.97vw);              /* 19px@640 */
  }
  .learning-step-tag::before {
    bottom: calc(-1 * max(8px, 1.7vw));
    border-width: max(8px, 1.7vw) max(4px, 0.9vw) 0;
  }
  .learning-step-tag::after {
    bottom: calc(-1 * max(4px, 0.95vw));
    left: calc(max(10px, 2.8vw) + 2px);
    border-width: max(5px, 1.1vw) max(2.5px, 0.55vw) 0;
  }
  .learning-step-card {
    min-height: max(72px, 16.4vw);               /* 105px@640 */
    border-width: 2px;
    border-radius: max(20px, 6.25vw);
  }
  .learning-step-card::before {
    inset: -2px;
    transform: translateY(max(4px, 0.94vw));
    border-width: 2px;
    border-radius: max(20px, 6.25vw);
  }
  .learning-step-name {
    font-size: max(1.9rem, 5vw);                 /* 32px@640 */
  }
  .learning-step-sub {
    font-size: max(1.2rem, 2.97vw);              /* 19px@640 */
  }

  /* ---- 共通見出し ---- */
  .learning-heading-en {
    font-size: max(1.6rem, 4.84vw);              /* 31px@640 */
  }
  .learning-heading-box {
    padding: max(10px, 2.66vw) max(10px, 2.9vw);
    border-width: 2px;
    border-radius: max(10px, 3.13vw);
  }
  .learning-heading-box::before {
    inset: -2px;
    transform: translateY(max(4px, 0.94vw));
    border-width: 2px;
    border-radius: max(10px, 3.13vw);
  }
  .learning-heading-box .f-dela {
    font-size: max(2rem, 7.5vw);                 /* 50px@640（375px でも箱が収まるようやや控えめ） */
    white-space: normal;
  }
  .learning-section-lead {
    margin-top: max(10px, 2.2vw);
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
  }

  /* ---- 日産ならではの学び: 1列 ---- */
  .learning-nissan {
    margin-top: max(20px, 4.7vw);
    padding: max(12px, 1.9vw) 0 max(28px, 6.6vw);
  }
  .learning-nissan-inner {
    width: calc(100% - 40px);
  }
  .learning-nissan-cards {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: max(12px, 2.34vw);
    margin-top: max(40px, 8vw);                  /* Figma: リード→カード1 約81px */
  }
  .learning-nissan-card {
    /* ★2026-08-20 カードを内枠いっぱいへ（跡田さん選択＝案B）。
       旧値は Figma の SP設計（640px幅でカード414px＝64.69%）をそのまま入れていたため、
       カードが内枠の中でさらに中央寄せされ、画面端から余分に空いていた
       （実測: 390px幅で35px・640px幅で113px＝カードが画面の65%）。
       内枠いっぱいにすると、このページの他のセクション（内枠はどこも画面端から20px）と
       余白が揃い、基準がひとつになる。360〜640pxで横スクロールが出ないことを実測済み。
       Figma の値に戻す場合は width: min(100%, max(320px, 64.69vw)); */
    width: 100%;
    padding: max(12px, 2.5vw) max(12px, 2.5vw) max(18px, 3.6vw);
    border-width: 2px;
    border-radius: max(20px, 6.25vw);
  }
  .learning-nissan-card-photo img {
    aspect-ratio: 382 / 254;
    border-radius: max(16px, 5vw);
  }
  .learning-nissan-card-title {
    margin-top: max(8px, 1.9vw);
    font-size: max(1.7rem, 3.91vw);              /* 25px@640 */
  }
  .learning-nissan-card-sub {
    font-size: max(1.3rem, 3.13vw);              /* 20px@640 */
  }
  .learning-nissan-card-body {
    margin-top: max(8px, 1.7vw);
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
  }

  /* ---- 職種別の教育ステップ ---- */
  .learning-training {
    margin-top: max(24px, 5.4vw);
  }
  .learning-training-inner {
    width: calc(100% - 40px);
  }
  .learning-jobs {
    gap: max(6px, 1.875vw);                      /* 12px@640 */
    margin-top: max(14px, 3vw);
  }
  .learning-jobs-btn {
    padding: max(6px, 2.2vw) 0;                  /* h50@640 */
    border-radius: max(6px, 1.25vw);
    font-size: max(1.4rem, 4.69vw);              /* 30px@640 */
  }
  .learning-panel {
    margin-top: max(8px, 2.34vw);
    padding: max(14px, 2.7vw) max(12px, 2.2vw) max(20px, 4vw);
    border-width: 2px;
    border-radius: max(10px, 3.13vw);
  }
  .learning-panel-summary,
  .learning-panel-lead {
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
  }
  .learning-panel-bar {
    margin-top: max(16px, 3.6vw);
    padding: max(6px, 1.4vw) max(20px, 6vw);
    border-radius: max(8px, 2.2vw);
    font-size: max(1.6rem, 4.69vw);              /* 30px@640 相当 */
  }
  /* 行: バンド＋本文の2カラム。写真は本文の下 */
  .learning-row {
    grid-template-columns: max(36px, 8.44vw) minmax(0, 1fr);  /* バンド 54px@640 */
    column-gap: max(14px, 3.9vw);                /* x134-109 = 25px@640 */
    padding: max(16px, 3.4vw) 0;
  }
  .learning-row-band {
    width: max(36px, 8.44vw);
    height: calc(100% + max(8px, 1.7vw));
    padding-bottom: max(14px, 2.8vw);
    clip-path: polygon(
      0 0, 100% 0,
      100% calc(100% - max(14px, 2.8vw)),
      50% 100%,
      0 calc(100% - max(14px, 2.8vw))
    );
  }
  .learning-row-term {
    font-size: max(1.3rem, 3.91vw);              /* 25px@640 */
  }
  .learning-row-main {
    grid-column: 2;
  }
  .learning-row-title {
    font-size: max(1.6rem, 3.91vw);              /* 25px@640 */
    line-height: 1.5;
  }
  .learning-row-body {
    margin-top: max(6px, 1.25vw);
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
    line-height: 1.75;
  }
  .learning-row-badge {
    margin-top: max(8px, 1.7vw);
    padding: max(2px, 0.5vw) max(6px, 1.4vw);
    /* ★2026-08-07 C-6: 下限 1.1rem(11px)→1.2rem(12px)（跡田さん判断）*/
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
  }
  .learning-row-photo {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: max(10px, 2.2vw);
    width: min(100%, max(280px, 50vw));          /* 320px@640 */
  }
  .learning-row-photo img,
  .learning-row-photo--empty {
    aspect-ratio: 320 / 182.5;
    border-radius: max(10px, 3.13vw);
  }

  /* ---- NEXT ---- */
  .learning-next {
    margin-top: max(24px, 5.2vw);
    margin-bottom: calc(-1 * max(40px, 10vw));
    padding: max(16px, 3.4vw) 0 calc(max(40px, 8vw) + max(40px, 10vw));
  }
  .learning-next::before {
    height: max(48px, 14.8vw);                   /* 95px@640 相当 */
  }
  .learning-next-inner {
    width: calc(100% - 40px);
  }
  .learning-next-group {
    margin-top: max(32px, 6.8vw);                /* ★2026-08-20 2倍（旧 max(16px, 3.4vw)）*/
  }
  .learning-next-bar {
    margin-bottom: calc(-1 * max(20px, 5vw));
    padding: max(8px, 1.9vw) max(14px, 3.4vw);
    border-width: 2px;
    border-radius: max(10px, 3.13vw);
    font-size: max(1.8rem, 6.56vw);              /* 42px@640 */
  }
  .learning-next-cards {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: max(12px, 2.34vw);
    /* ★2026-08-20 スマホ: 見出しの帯と「体感で理解！」の吹き出しを離す
       （跡田さん選択＝スマホ案2）。カードの角から出ている吹き出しが帯に食い込んでいた
       （実測 390pxで8px・1024pxで21px重なる）。帯のはみ出し量に足して間隔を作る。
       これで帯の下端から吹き出しの上端まで 390pxで12px・1024pxで16px 空く */
    padding-top: calc(max(20px, 5vw) + max(20px, 3.6vw));
  }
  .learning-next-card {
    width: min(100%, max(320px, 72.5vw));        /* 464px@640 */
    padding: max(12px, 2.5vw) max(12px, 2.5vw) max(18px, 3.6vw);
    border-width: 2px;
    border-radius: max(10px, 2.5vw);
  }
  .learning-next-card-photo img {
    aspect-ratio: 432 / 254;
    border-width: 1px;
    border-radius: max(10px, 2.5vw);
  }
  .learning-next-card-title {
    margin-top: max(10px, 2.2vw);
    font-size: max(1.6rem, 3.91vw);              /* 25px@640 */
  }
  .learning-next-card-body {
    margin-top: max(6px, 1.25vw);
    padding-inline: max(4px, 1.4vw);
    font-size: max(1.2rem, 2.5vw);               /* 16px@640 */
    line-height: 1.9;
  }
  .learning-next-bubble {
    width: max(88px, 20vw);                      /* 128px@640 */
  }
  .learning-next-bubble--left {
    top: calc(-1 * max(10px, 2.2vw));
    left: calc(-1 * max(8px, 2.5vw));
  }
  .learning-next-bubble--right {
    top: calc(-1 * max(10px, 2.2vw));
    right: calc(-1 * max(8px, 2.5vw));
  }
}

/* ============================================================
   ごく狭い幅: NEXT リードの固定改行を解除して自然折返し
============================================================ */
@media (max-width: 767px) {
  .learning-next .learning-section-lead br {
    display: none;
  }
  .learning-hero-catch {
    max-width: none;                             /* 写真下に回り込む幅では全幅で自然折返し */
  }
}