@charset "UTF-8";

/* ===========================================================
   転職準備ガイド (/career/{slug}/) 専用スタイル
   FAQ・関連リンクは職種LP(occupation-lp.css)のスタイルを流用するため、
   このファイルは本文の読み物部分だけを定義する。
   共通クラスを上書きしないよう、すべて cg- 接頭辞で定義する。
   =========================================================== */

.cg-article {
  background: #fff;
}
.cg-inner {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ----- 記事の導入 ----- */
.cg-lead {
  padding: 32px 0 8px;
}
.cg-lead-figure {
  margin: 0 0 22px;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
/* 16:9のままだと導入だけで画面が埋まるため、横長に切って高さを抑える */
.cg-lead-figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* 想定読者。冒頭で「自分向けか」を判断できるようにする */
.cg-hero-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid #e2e6ef;
  border-radius: 10px;
  background: #f8f9fc;
}
.cg-hero-target-label {
  flex: 0 0 auto;
  background: var(--lp-orange-2, #ff6a00);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  padding: 5px 10px;
}
.cg-hero-target-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lp-navy-2, #050b4e);
  font-weight: 700;
}

/* ----- CTA ----- */
.cg-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cg-cta-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--lp-orange-2, #ff6a00);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cg-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.36);
}
.cg-cta-primary-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.cg-cta-primary-note {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}
.cg-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--lp-navy-2, #050b4e);
  color: var(--lp-navy-2, #050b4e);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.cg-cta-secondary:hover {
  background: rgba(5, 11, 78, 0.06);
}
/* 濃紺の記事下CTA内では白抜きに戻す */
.cg-cta-block .cg-cta-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.cg-cta-block .cg-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ----- 目次 ----- */
.cg-toc {
  padding: 28px 0 0;
}
.cg-toc .cg-inner {
  max-width: 840px;
}
.cg-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-navy-2, #050b4e);
  margin: 0 0 10px;
}
/* 番号は丸バッジで描くため、リストのマーカーは出さない */
.cg-toc-list {
  margin: 0;
  padding: 22px 24px;
  background: #f5f7fb;
  border-left: 5px solid var(--lp-orange-2, #ff6a00);
  border-radius: 0 12px 12px 0;
  list-style: none;
}
.cg-toc-item {
  margin: 0 0 6px;
}
.cg-toc-item:last-child {
  margin-bottom: 0;
}
.cg-toc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--lp-navy-2, #050b4e);
  text-decoration: none;
  transition: background 0.2s ease;
}
.cg-toc-link:hover {
  background: #e9edf7;
}
.cg-toc-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lp-navy-2, #050b4e);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.cg-toc-text {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
}

/* ----- 本文 ----- */
.cg-section {
  padding: 44px 0;
  scroll-margin-top: 80px;
}
/* 章ごとに背景を切り替え、同じ見た目が続かないようにする（偶数章にだけ付与） */
.cg-section-alt {
  background: #f8f9fc;
}
/* 記事の見出し（h2）
   章番号は目次と重複して読み手の助けにならないため置かず、
   下線の色を2段に分けて章の切れ目を示す。背景が白でも薄いグレーでも成立する */
.cg-heading {
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--lp-navy-2, #050b4e);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid #dfe4f0;
}
.cg-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--lp-orange-2, #ff6a00);
}
.cg-body {
  font-size: 15px;
  line-height: 1.95;
  color: #333;
  margin: 0 0 18px;
}

/* 章の冒頭に置く画像 */
.cg-figure {
  margin: 0 0 20px;
}
/* 本文が長いため、章の画像は横長に切って読みの流れを止めないようにする */
.cg-figure img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  border-radius: 14px;
}
.cg-figure-caption {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.8;
  color: #5a6172;
}

/* 項目リスト（用語 → 説明）。連番を左に置く */
.cg-item-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cg-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #e2e6ef;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cg-item:hover {
  border-color: #c9d2e6;
  box-shadow: 0 4px 14px rgba(5, 11, 78, 0.07);
}
.cg-item-index {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--lp-orange-2, #ff6a00);
  color: var(--lp-orange-2, #ff6a00);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.cg-item-body {
  min-width: 0;
}
.cg-item-term {
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-navy-2, #050b4e);
  margin: 0 0 6px;
}
.cg-item-text {
  font-size: 14px;
  line-height: 1.85;
  color: #444;
  margin: 0;
}

/* ----- 記事中盤の要点バナー ----- */
.cg-highlight {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 240px;
  padding: 40px 20px;
  background: var(--lp-navy-2, #050b4e);
}
.cg-highlight-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}
.cg-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 11, 78, 0.9) 0%, rgba(5, 11, 78, 0.8) 45%, rgba(5, 11, 78, 0.35) 100%);
}
.cg-highlight-text {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 22px;
  border-left: 5px solid var(--lp-orange-2, #ff6a00);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.75;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ----- 関連求人 ----- */
.cg-section-jobs {
  padding-top: 44px;
}
/* 求人カードは本文より広い枠を持つため、記事の左端に揃える */
.cg-section-jobs .job-description {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 20px;
}
.cg-jobs-more {
  margin-top: 18px;
  text-align: center;
}

/* ----- 記事下CTA ----- */
.cg-cta-block {
  margin-top: 48px;
  padding: 40px 0;
  background: var(--lp-navy-2, #050b4e);
  text-align: center;
}
.cg-cta-block-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
}
.cg-cta-block-text {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 22px;
}
.cg-cta-block .cg-cta-group {
  justify-content: center;
}

/* ----- スマートフォン ----- */
@media screen and (max-width: 767px) {
  .cg-lead {
    padding: 22px 0 4px;
  }
  .cg-lead-figure {
    margin-bottom: 18px;
    border-radius: 12px;
  }
  .cg-lead-figure img {
    aspect-ratio: 16 / 9;
  }
  .cg-figure img {
    aspect-ratio: 16 / 9;
  }
  .cg-figure-caption {
    font-size: 12.5px;
  }
  .cg-heading {
    font-size: 20px;
    margin-bottom: 18px;
    padding-bottom: 13px;
  }
  .cg-heading::after {
    width: 52px;
  }
  .cg-section {
    padding: 32px 0;
  }
  .cg-highlight {
    min-height: 0;
    padding: 32px 20px;
  }
  .cg-highlight-text {
    font-size: 17px;
    padding-left: 16px;
  }
  .cg-cta-group {
    flex-direction: column;
  }
  .cg-cta-primary,
  .cg-cta-secondary {
    min-width: 0;
    width: 100%;
  }
  .cg-cta-block {
    margin-top: 36px;
    padding: 32px 0;
  }
  .cg-cta-block-title {
    font-size: 17px;
  }
}

/* 目次内の診断へのリンク。章番号と区別するため色を変える */
.cg-toc-num-check {
  background: var(--lp-orange-2, #ff6a00);
}

/* ----- 希望から求人を探す ----- */
.cg-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cg-route {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid #e2e6ef;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cg-route:hover {
  border-color: var(--lp-orange-2, #ff6a00);
  box-shadow: 0 8px 20px rgba(5, 11, 78, 0.1);
  transform: translateY(-2px);
}
/* 職種の写真。職種LPと同じ画像を小さく切り出したもの */
.cg-route-media {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--lp-cream, #fffaf4);
}
.cg-route-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cg-route:hover .cg-route-media img {
  transform: scale(1.06);
}
.cg-route-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cg-route-name {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-navy-2, #050b4e);
  margin-bottom: 4px;
}
.cg-route-count {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-orange, #ff5a09);
}
.cg-route-arrow {
  flex: 0 0 auto;
  color: #b9c2d6;
  font-size: 15px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.cg-route:hover .cg-route-arrow {
  color: var(--lp-orange-2, #ff6a00);
  transform: translateX(3px);
}
/* すべての求人を見る（写真を持たない行） */
/* 「すべての求人を見る」。締めの導線なので紺で塗り、
   ほかのカードと同じく左にサムネイルを置く */
.cg-route-all {
  grid-column: 1 / -1;
  background: var(--lp-navy-2, #050b4e);
  border-color: var(--lp-navy-2, #050b4e);
}
/* 紺の上に置くため、サムネイルの下地も紺にして境目を作らない */
.cg-route-all .cg-route-media {
  background: var(--lp-navy-2, #050b4e);
}
.cg-route-all .cg-route-media img {
  object-fit: contain;
}
.cg-route-all:hover {
  border-color: var(--lp-navy-2, #050b4e);
}
.cg-route-all .cg-route-name {
  margin-bottom: 0;
  color: #fff;
}
.cg-route-all .cg-route-arrow {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .cg-routes {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cg-route-media {
    width: 72px;
    height: 72px;
  }
  .cg-route-name {
    font-size: 14px;
  }
}

/* ----- 志望動機の例文 ----- */
.cg-examples {
  display: grid;
  gap: 14px;
}
.cg-example {
  padding: 20px 22px;
  border: 1px solid #e2e6ef;
  border-left: 5px solid var(--lp-orange-2, #ff6a00);
  border-radius: 0 12px 12px 0;
  background: #fff;
}
.cg-example-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--lp-navy-2, #050b4e);
  margin: 0 0 10px;
}
.cg-example-body {
  font-size: 14.5px;
  line-height: 2;
  color: #333;
  margin: 0 0 12px;
}
.cg-example-strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lp-navy-2, #050b4e);
  font-weight: 700;
  margin: 0;
}
.cg-example-strength-label {
  background: var(--lp-orange-light, #ffede0);
  color: var(--lp-orange, #ff5a09);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

/* ----- 自己PRの穴埋めテンプレート ----- */
.cg-pr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.cg-pr-copy {
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--lp-orange-2, #ff6a00);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.26);
}
.cg-pr-copy:hover {
  transform: translateY(-1px);
}
.cg-pr-copy:focus-visible {
  outline: 3px solid #1f5fd0;
  outline-offset: 2px;
}
.cg-pr-status {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-navy-2, #050b4e);
}

/* ----- 章末の注意書き ----- */
/* 章内の小見出し。h2より小さく、項目名(.cg-item-term)より強くする */
.cg-subheading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--lp-navy-2, #050b4e);
  margin: 34px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--lp-orange-2, #ff6a00);
}
.cg-subheading:first-of-type {
  margin-top: 28px;
}

/* 章と章をつなぐ帯。写真入りのハイライトと同じ紺だが、
   主役ではないので背景画像を敷かず、余白と文字を小さくする */
.cg-highlight-simple {
  min-height: 0;
  padding: 26px 20px;
}
.cg-highlight-simple .cg-highlight-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  text-shadow: none;
}

.cg-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8f9fc;
  border-left: 4px solid #b9c2d6;
  font-size: 13px;
  line-height: 1.9;
  color: #4b5468;
}


@media screen and (max-width: 767px) {
  .cg-subheading {
    font-size: 16px;
    margin: 28px 0 12px;
    padding-left: 10px;
  }
  .cg-highlight-simple {
    padding: 22px 20px;
  }
  .cg-highlight-simple .cg-highlight-text {
    font-size: 15px;
    line-height: 1.95;
  }
  .cg-example {
    padding: 16px 16px;
  }
      .cg-pr-copy {
    width: 100%;
  }
    }

/* 自己PR例のコピーボタン */
.cg-example-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.cg-pr-copy-sm {
  padding: 9px 16px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.22);
}

/* ----- 適職診断バナー ----- */
.cg-banner {
  margin: 28px 0 0;
  scroll-margin-top: 80px;
}
.cg-banner-link {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--lp-orange, #ff5a09) 0%, #ff8a3d 55%, #ffb26b 100%);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(255, 106, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cg-banner-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(255, 106, 0, 0.34);
}
.cg-banner-link:focus-visible {
  outline: 3px solid #1f5fd0;
  outline-offset: 3px;
}
.cg-banner-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}
.cg-banner-title {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 14px;
}
.cg-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.cg-banner-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-orange, #ff5a09);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
}
.cg-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--lp-navy-2, #050b4e);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.cg-banner-note {
  margin: 12px 2px 0;
  font-size: 13px;
  line-height: 1.85;
  color: #5a6172;
}

@media screen and (max-width: 767px) {
  .cg-banner-link {
    padding: 22px 18px;
  }
  .cg-banner-title {
    font-size: 19px;
  }
  .cg-banner-action {
    width: 100%;
    justify-content: center;
  }
  .cg-pr-copy-sm {
    width: 100%;
  }
}

/* 項目ごとの「UPROキャリアでは」。本文と区別しつつ、目立たせすぎない */
.cg-item-action {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7f1;
  border: 1px solid #ffd9bd;
}
.cg-item-action-label {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--lp-orange-2, #ff6a00);
  border-radius: 999px;
  padding: 4px 10px;
}
.cg-item-action-text {
  flex: 1 1 240px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4b3a2c;
}

@media screen and (max-width: 767px) {
  .cg-item-action {
    padding: 12px 12px;
  }
  .cg-item-action-text {
    font-size: 13px;
    flex-basis: 100%;
  }
}

/* ----- 記事下の適職診断バナー ----- */
.cg-cta-banner {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cg-cta-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.cg-cta-banner:focus-visible {
  outline: 3px solid #ffd9bd;
  outline-offset: 3px;
}
.cg-cta-banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* 2枚目のバナー。1枚目の補足文との間隔を空ける */
.cg-cta-banner-practice {
  margin-top: 28px;
}
.cg-cta-banner-note {
  max-width: 800px;
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85);
}
.cg-cta-block .cg-cta-group {
  margin-top: 22px;
}


/* ----- 章末に置くバナー -----
   白と薄いグレーどちらの章でも成立するよう、影は使わず枠線で締める */
.cg-section-banner {
  margin: 26px 0 0;
}
.cg-inline-banner {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e6ef;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cg-inline-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(5, 11, 78, 0.14);
}
.cg-inline-banner:focus-visible {
  outline: 3px solid #ffd9bd;
  outline-offset: 3px;
}
.cg-inline-banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* 押す前にログインが必要なことを伝える */
.cg-inline-banner-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #5a6172;
}

@media screen and (max-width: 767px) {
  .cg-cta-banner-note {
    font-size: 12.5px;
    text-align: left;
  }
      .cg-section-banner {
    margin-top: 22px;
  }
}

/* ----- 診断の前に置く導入文 ----- */
.cg-check-intro {
  padding: 0 0 36px;
}
.cg-check-intro .cg-body {
  margin: 0;
}

/* ----- ページ末尾の検討段階別CTA -----
   共通CTA(.cta-section)の見た目を引き継ぎ、2つ目以降のボタンだけ定義する */
/* バナーは記事下CTAと同じ .cg-cta-banner をそのまま使い、
   オレンジ地の上でも白いバナーが浮いて見えるよう影と余白だけ足す */
.cg-final-cta h2 {
  margin-bottom: 28px;
}
.cg-final-cta .cg-cta-banner {
  box-shadow: 0 8px 20px rgba(120, 45, 0, 0.24);
}
/* .cta-section p の指定（16px/太字/下32px）を打ち消し、記事下CTAと同じ見た目に揃える */
.cg-final-cta .cg-cta-banner-note {
  max-width: 800px;
  margin: 10px auto 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
}
.cg-final-cta .cg-cta-banner-practice {
  margin-top: 26px;
}
.cg-final-cta .cta-buttons {
  max-width: 460px;
  margin: 30px auto 0;
}
.cg-final-cta .cta-button-primary,
.cg-final-cta .cta-button-secondary {
  width: 100%;
  font-size: 17px;
  padding: 16px 24px;
}
.cg-final-cta .cta-button-primary {
  background: #fff;
  color: var(--lp-orange-2, #ff6a00);
}
/* 求人への導線。オレンジ地の上で白抜きだと弱いため、紺で塗って独立したボタンに見せる */
.cg-final-cta .cta-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-navy-2, #050b4e);
  border: 2px solid var(--lp-navy-2, #050b4e);
  border-radius: 999px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cg-final-cta .cta-button-secondary:hover {
  background: #101a6e;
  border-color: #101a6e;
  transform: translateY(-2px);
}
.cg-final-cta .cta-button-secondary:focus-visible,
.cg-final-cta .cta-button-primary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* 押す前にログインが必要なことを伝える */
.cg-final-cta-note {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.85;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .cg-check-intro {
    padding-bottom: 28px;
  }
  .cg-final-cta .cta-button-primary,
  .cg-final-cta .cta-button-secondary {
    font-size: 15px;
    padding: 14px 16px;
  }
  .cg-final-cta-note {
    font-size: 12.5px;
    text-align: left;
  }
}

/* ===========================================================
   比較表
   列が多いと本文幅に収まらないため、表だけを横スクロールさせる。
   ページ全体は横に広がらないようにする。
   =========================================================== */
.cg-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  /* スクロールできることを枠線で示す。色だけに頼らない */
  border: 1px solid var(--lp-border-cream, #eadfce);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
/* キーボードでも横スクロールできるよう tabindex を付けているため、フォーカスを必ず見せる */
.cg-table-wrap:focus-visible {
  outline: 3px solid #1f5fd0;
  outline-offset: 2px;
}
.cg-table {
  width: 100%;
  /* 3列が潰れて読めなくならない最小幅。これを下回るとスクロールに切り替わる */
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.8;
  background: #fff;
}
.cg-table-caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--lp-navy-2, #050b4e);
  background: var(--lp-cream, #fdf7ee);
  border-bottom: 1px solid var(--lp-border-cream, #eadfce);
}
.cg-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  background: var(--lp-navy-2, #050b4e);
  white-space: nowrap;
}
.cg-table tbody th {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: var(--lp-navy-2, #050b4e);
  background: var(--lp-cream, #fdf7ee);
  white-space: nowrap;
}
.cg-table tbody td {
  vertical-align: top;
  padding: 12px 16px;
  color: var(--lp-text, #333);
}
.cg-table tbody tr + tr th,
.cg-table tbody tr + tr td {
  border-top: 1px solid var(--lp-border-cream, #eadfce);
}
.cg-table tbody td + td {
  border-left: 1px solid var(--lp-border-cream, #eadfce);
}
.cg-table tbody th + td {
  border-left: 1px solid var(--lp-border-cream, #eadfce);
}
.cg-table-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: #4b5468;
}

/* ===========================================================
   そのまま使える質問例
   面接で声に出す文をそのまま置くため、本文とは別の見た目にする
   =========================================================== */
.cg-scripts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cg-script {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lp-cream, #fdf7ee);
  border-left: 4px solid var(--lp-orange-2, #ff6a00);
}
.cg-script-label {
  /* ラベルの文字数がまちまちなので、幅を揃えて質問文の開始位置を合わせる */
  flex: 0 0 auto;
  min-width: 104px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  color: var(--lp-orange, #e35c00);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.cg-script-text {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--lp-navy-2, #050b4e);
  font-weight: 500;
}
/* 声に出して使う文だと分かるよう、かぎ括弧で囲む */
.cg-script-text::before {
  content: "「";
}
.cg-script-text::after {
  content: "」";
}

/* ===========================================================
   本文中盤のCTA
   最後まで読まないと次の行動へ移れない状態を避けるための帯
   =========================================================== */
.cg-cta-inline {
  padding: 30px 0;
  background: var(--lp-cream, #fdf7ee);
  border-top: 1px solid var(--lp-border-cream, #eadfce);
  border-bottom: 1px solid var(--lp-border-cream, #eadfce);
}
.cg-cta-inline .cg-cta-group {
  justify-content: center;
}

/* ===========================================================
   関連記事
   =========================================================== */
.cg-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 6px;
}
.cg-related-item {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lp-border-cream, #eadfce);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cg-related-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(4, 10, 67, 0.16);
}
.cg-related-item:focus-visible {
  outline: 3px solid #1f5fd0;
  outline-offset: 2px;
}
.cg-related-media {
  display: block;
  line-height: 0;
}
.cg-related-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 画像の有無で本文の始まる位置がずれないよう、本文側で余白を持つ */
.cg-related-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px;
}
.cg-related-tag {
  align-self: flex-start;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: var(--lp-orange, #e35c00);
  background: var(--lp-orange-light, #fff1e5);
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 12px;
}
.cg-related-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-navy-2, #050b4e);
  margin-bottom: 8px;
}
.cg-related-text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--lp-text, #333);
}
/* 「記事を読む」はカードの下端に揃え、高さが違っても不揃いに見せない */
.cg-related-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.cg-related-more-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--lp-orange, #e35c00);
}
.cg-related-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lp-orange-2, #ff6a00);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.cg-related-item:hover .cg-related-arrow {
  transform: translateX(3px);
}

@media screen and (max-width: 900px) {
  .cg-related {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .cg-table-wrap {
    margin-top: 18px;
  }
  .cg-table {
    font-size: 13.5px;
  }
  .cg-table-caption,
  .cg-table thead th,
  .cg-table tbody th,
  .cg-table tbody td {
    padding: 10px 12px;
  }
  .cg-script {
    flex-direction: column;
    gap: 8px;
    padding: 13px 14px;
  }
  .cg-script-text {
    font-size: 14px;
  }
  .cg-cta-inline {
    padding: 24px 0;
  }
}

/* アイキャッチ未用意の記事の写真枠。写真を置くまでの間、カードの高さを揃えるためだけの無地の面 */
.cg-related-media-empty {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--lp-navy-2, #050b4e) 0%, #1b2a7a 100%);
}