/* ============================================================
   精密審美会 採用サイト — スキルアップモデル ページ固有スタイル
   ============================================================ */

/* --- セカンダリMV オーバーライド ---
   Figma: Skill up 1 (53:258) 339×93px, overlap=52px
   About: max-width=481, margin-bottom=-33px
   ===================================== */
.secondary-mv--skillup .secondary-mv__title-logo {
  max-width: 339px;
  margin-bottom: -52px;
}

/* --- キャリアプラン ---
   Figma: Rectangle 7 (46:109) 1200×1068, #EEF8FF 中央配置(左右120px余白)
   ======================================= */
.skillup-career {
  background: #EEF8FF;
  border-radius: 0 50px 0 50px; /* Figma: rectangleCornerRadii [0,50,0,50] */
  padding: 80px 120px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Figma: 53:247 — fs=32, fw=400, ls=2.56, lh=52, #1556A6 */
.skillup-career__heading {
  font-size: 32px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 2.56px;
  line-height: 52px;
  margin-bottom: var(--spacing-lg);
}

/* Figma: 53:248 — fs=16, fw=400, ls=1.28, lh=25, #333 */
.skillup-career__text p {
  font-size: 16px;
  letter-spacing: 1.28px;
  line-height: 25px;
  margin-bottom: var(--spacing-md);
}

/* Figma: about_06 (53:250) 960×408, 装飾なし直接配置 */
.skillup-career__graph {
  margin-top: var(--spacing-xl);
}

.skillup-career__graph img {
  width: 100%;
  max-width: 960px;
  display: block;
}

/* --- スキルアップモデルの例 ---
   Figma: 白背景（PC frameの背景色）
   ======================================= */
.skillup-model {
  padding: var(--spacing-xxl) 0;
  background: #fff;
}

/* Figma: 46:87 — fs=32, fw=400, ls=2.56, lh=52, #1556A6 */
.skillup-model__title {
  font-size: 32px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 2.56px;
  line-height: 52px;
  margin-bottom: var(--spacing-lg);
}

.skillup-model__block {
  margin-bottom: var(--spacing-xl);
}

/* Figma: Component 8 — fs=24, fw=400, ls=0.96, lh=46, #1556A6 + icon */
.skillup-model__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 24px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 0.96px;
  line-height: 46px;
  margin-bottom: var(--spacing-sm);
}

/* Figma: icon 38×20px */
.skillup-model__heading-icon {
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

/* Figma: 46:94, 53:252 — fs=16, fw=400, ls=1.28, lh=25, #333 */
.skillup-model__block p {
  font-size: 16px;
  letter-spacing: 1.28px;
  line-height: 25px;
  margin-bottom: var(--spacing-md);
}

.skillup-model__img {
  margin-top: var(--spacing-md);
}

.skillup-model__img img {
  width: 100%;
  display: block;
}

/* ============================================================
   SP レスポンシブ (max-width: 768px)
   Figma SP: 46:122 — 430×3155px
   コンテンツ幅: ~386px (左右余白 22px)
   ============================================================ */
@media (max-width: 768px) {

  /* --- MV — Skillup固有SPオーバーライド ---
     Figma SP: ロゴ 217×60px @(46,50), タイトル fs=30.4 @(22,84)
     ======================================= */
  .secondary-mv--skillup .secondary-mv__title-logo {
    max-width: 217px;
  }





  /* --- キャリアプラン ---
     Figma SP: BG 430×1042, bg=#EEF8FF, rcr=[0,50,0,0] (右上のみ角丸)
     コンテンツ左右余白: 22px
     ======================================= */
  .skillup-career {
    max-width: 100%;
    /* 全幅化 (PC: max-width:1200px → SP: 全幅) */
    border-radius: 0 50px 0 0;
    /* Figma SP: 右上のみ角丸50px (PC: 0 50px 0 50px) */
    padding: 90px 22px 40px;
    /* Figma SP: 見出しY=250 - BGY=160 = top 90px, LR=22px */
  }

  /* Figma SP: fs=25 ls=2.0 lh=40 #1556A6
     360pxで折り返し防止のため clamp で可変化
     360px: 6.7vw=24.1px / 375px+: 25px */
  .skillup-career__heading {
    font-size: clamp(20px, 6.7vw, 25px);
    letter-spacing: 2px;
    line-height: 40px;
    margin-bottom: 24px;
  }

  /* Figma SP: fs=14 ls=1.12 lh=25 #333 */
  .skillup-career__text p {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 25px;
  }

  /* Figma SP: グラフ 386×164 — 横スクロール廃止、縮小表示 */
  .skillup-career__graph {
    margin-top: 20px;
  }

  .skillup-career__graph img {
    width: 100%;
    max-width: 100%;
    /* PC版の min-width:600px を無効化し、幅100%で縮小表示 */
  }


  /* --- スキルアップモデルの例 ---
     Figma SP: 白背景、コンテンツ余白 22px
     ======================================= */
  .skillup-model {
    padding: 40px 0;
  }

  .skillup-model__inner {
    padding: 0 22px;
  }

  /* Figma SP: fs=25 ls=2.0 lh=40 — sp-br + clamp併用
     行2「主なスキルアップモデルの例」12文字: 360px→20.9px(275<316), 430px→25px */
  .skillup-model__title {
    font-size: clamp(20px, 5.8vw, 25px);
    letter-spacing: 2px;
    line-height: 40px;
    margin-bottom: 40px;
    /* Figma: タイトルbottom(1373) → Component8 top(1456) ≈ 83px, 2行分のline-height含む */
  }

  /* Figma SP: Component 8/9 — fs=22.4, gap=12, icon 31×16
     360px端末でのはみ出しを防ぐため clamp で可変化 */
  .skillup-model__heading {
    align-items: flex-start;
    /* テキスト複数行時にアイコンを上端固定、テキストは下方向に伸びる */
    font-size: clamp(18px, 5.2vw, 22.4px);
    letter-spacing: 0.896px;
    line-height: 38px;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* Figma SP: icon 31×16px (PC: 38×20px)
     flex-start時にテキスト1行目の中央に揃えるため margin-top 補正
     (line-height 38px - icon 16px) / 2 = 11px */
  .skillup-model__heading-icon {
    width: 31px;
    height: 16px;
    margin-top: 11px;
  }

  /* Figma SP: fs=14 ls=1.12 lh=26 #333 */
  .skillup-model__block p {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 26px;
  }

  /* Figma SP: モデル画像 386×465 — 横スクロール廃止、縮小表示 */
  .skillup-model__img {
    margin-top: 16px;
  }

  .skillup-model__img img {
    width: 100%;
    /* PC版の min-width:600px を無効化し、幅100%で縮小表示 */
  }
}