/**
 * /indonesia-ginou-jisshu/ — Page-specific styles
 *
 * v1.3.0-phase12a-ginou-jisshu / 2026-05-21
 *
 * 設計方針 (Phase 12-A 設計仕様書 v1.2):
 *  - 落ち着いた B2B 担当者向けデザイン。罫線・余白・数字・表・カードで品質を出す
 *  - AI 風グラデーション・SaaS カード・テンプレ LP 感は一切なし
 *  - 角丸 4px (カード) / 12px (写真) / 9999px (ピル) のみ
 *  - `.jj-page-gj` スコープ内で --gj-* ローカル変数を定義 (tokens.css 非変更)
 *  - 配色は var(--jj-primary, #0072B1) を再利用 (#185FA5 ハードコード禁止)
 *  - .jj-nowrap は utilities.css 既存をそのまま利用 (専門用語保護用)
 *  - レスポンシブ: PC (>= 1024px) / Tablet (768-1023.98px) / Mobile (<= 767.98px)
 *  - word-break: H1/H2/Stats 数字のみ keep-all、本文は overflow-wrap: anywhere
 *
 * @package JobJepang
 */

/* ============================================================
   ROOT — LOCAL DESIGN TOKENS (scoped to .jj-page-gj)
   ============================================================ */

.jj-page-gj {
  /* Brand alignment: JobJepang ブランドトークン参照 (Q7: --jj-primary 再利用) */
  --gj-blue:        var(--jj-primary, #0072B1);
  --gj-blue-dark:   var(--jj-primary-dark, #005a8e);
  --gj-blue-light:  #F4F8FB;                                /* 薄青背景 (Phase 12-A 専用) */

  /* Backgrounds */
  --gj-bg-white:              var(--jj-bg-white, #ffffff);
  --gj-bg-section-alt:        var(--jj-bg-card, #F8FAFC);
  /* HOTFIX v1.3.2: --gj-bg-photo-placeholder は PHOTO ダミー撤去で不要となったため削除済み */

  /* Borders */
  --gj-border:         #DDE3EA;
  --gj-border-strong:  var(--jj-gray-200, #E5E9F0);

  /* Text */
  --gj-text-h1:           #0F1F3D;
  --gj-text-strong:       var(--jj-text-primary, #1F2937);
  --gj-text-body-strong:  #374151;
  --gj-text-body:         var(--jj-text-muted, #4A5568);
  --gj-text-aux:          #6B7280;
  --gj-text-mute:         #94A3B8;

  /* Radius */
  --gj-radius-card:   4px;
  --gj-radius-photo:  var(--jj-radius-md, 12px);
  --gj-radius-pill:   var(--jj-radius-full, 9999px);

  /* Section paddings */
  --gj-section-py-pc:      96px;
  --gj-section-py-tablet:  72px;
  --gj-section-py-mobile:  48px;

  font-family: var(--jj-font-jp);
  color: var(--gj-text-body);
  background: var(--gj-bg-white);
}

/* Section wrapper helpers */
.jj-page-gj-section {
  padding: var(--gj-section-py-pc) 0;
  background: var(--gj-bg-white);
}
.jj-page-gj-section--alt {
  background: var(--gj-bg-section-alt);
}

/* Section head re-tuning (.jj-section-head from components.css, refine inside .jj-page-gj) */
.jj-page-gj .jj-section-head {
  text-align: left;
  margin: 0 0 40px;
}
.jj-page-gj .jj-section-head .jj-eyebrow {
  color: var(--gj-blue);
  letter-spacing: 0.08em;
  font-weight: 500;
  font-size: 13px;
}
.jj-page-gj .jj-section-head .jj-h2 {
  color: var(--gj-text-strong);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: keep-all;
  line-break: strict;
  margin: 8px 0 12px;
}
.jj-page-gj .jj-section-head .jj-section-lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gj-text-body);
  overflow-wrap: anywhere;
  margin: 0;
}

/* ============================================================
   S0 BREADCRUMB
   ============================================================ */

.jj-page-gj-breadcrumb-wrap {
  padding: 24px 0 0;
  background: var(--gj-bg-white);
}
.jj-page-gj-breadcrumb-wrap .jj-breadcrumb {
  font-size: 14px;
  color: var(--gj-text-aux);
}
.jj-page-gj-breadcrumb-wrap .jj-breadcrumb a {
  color: var(--gj-text-aux);
  text-decoration: none;
}
.jj-page-gj-breadcrumb-wrap .jj-breadcrumb a:hover {
  color: var(--gj-blue);
  text-decoration: underline;
}
.jj-page-gj-breadcrumb-wrap .jj-breadcrumb-current {
  color: var(--gj-text-strong);
}

/* ============================================================
   S1 HERO
   ============================================================ */

.jj-page-gj-hero {
  padding: var(--gj-section-py-pc) 0;
  background: linear-gradient(180deg, var(--gj-blue-light) 0%, var(--gj-bg-white) 100%);
}
.jj-page-gj-hero-inner {
  max-width: var(--jj-container-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--jj-container-padding-x, 16px);
}
.jj-page-gj-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* HOTFIX v1.3.2: --text-only modifier 撤去。
   JJ_GJ_HERO_PHOTO_READY 定数撤廃により Staging/Production 共に 2 カラム表示。
   モバイル/タブレットでは下記 @media が grid-template-columns: 1fr に切替。 */

.jj-page-gj-hero-text {
  display: block;
}
.jj-page-gj-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gj-blue);
  margin: 0 0 16px;
}
.jj-page-gj-h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--gj-text-h1);
  margin: 0 0 24px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-h1-accent {
  color: var(--gj-blue);
}
.jj-page-gj-lead {
  font-size: 18px;
  line-height: 1.85;
  color: var(--gj-text-body-strong);
  margin: 0 0 32px;
  overflow-wrap: anywhere;
  line-break: strict;
}

.jj-page-gj-hero-cta {
  margin: 0 0 16px;
}
.jj-page-gj-cta-note {
  font-size: 14px;
  color: var(--gj-text-aux);
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-cta-note-sep {
  color: var(--gj-text-mute);
  margin: 0 6px;
}

.jj-page-gj-hero-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
/* HOTFIX v1.3.2: hero-top.webp (1200x900 / 4:3 / WebP) を流用。
   LCP 候補画像のため CLS 防止 (aspect-ratio) + 角丸 + object-fit cover で
   ブレない描画を保証する。loading="eager" / fetchpriority="high" は HTML 側で設定。 */
.jj-page-gj-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--gj-radius-photo);
  object-fit: cover;
}
.jj-page-gj-hero-caption {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-pill);
  font-size: 13px;
  color: var(--gj-text-aux);
  line-height: 1.4;
}
.jj-page-gj-hero-caption-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gj-blue);
}

/* ============================================================
   S2 STATS — 4-col grid with N4 highlight cell
   ============================================================ */

.jj-page-gj-stats {
  padding: 64px 0;
  background: var(--gj-bg-white);
}
.jj-page-gj-stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.jj-page-gj-stat {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  padding: 24px 20px;
  text-align: left;
}
.jj-page-gj-stat--highlight {
  background: var(--gj-blue-light);
  border: 2px solid var(--gj-blue);
}
.jj-page-gj-stat-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gj-blue);
  margin: 0 0 8px;
  word-break: keep-all;
  line-break: strict;
  letter-spacing: 0.01em;
}
.jj-page-gj-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gj-text-strong);
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.jj-page-gj-stat-sub {
  font-size: 12px;
  color: var(--gj-text-aux);
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ============================================================
   S3 CHALLENGES — 2-col card grid (white background)
   ============================================================ */

.jj-page-gj-challenges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jj-page-gj-challenge-card {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  padding: 24px;
}
.jj-page-gj-challenge-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gj-blue);
  margin: 0 0 8px;
}
.jj-page-gj-challenge-h {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 0 0 12px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-challenge-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ============================================================
   S4 SOLUTIONS — 2-col card grid + parent-collab note (alt bg)
   ============================================================ */

.jj-page-gj-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jj-page-gj-solution-card {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  padding: 24px;
}
.jj-page-gj-solution-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gj-blue);
  margin: 0 0 8px;
}
.jj-page-gj-solution-h {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 0 0 12px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-solution-h strong {
  font-weight: 700;
  color: var(--gj-text-strong);
}
.jj-page-gj-solution-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-solution-body strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}

.jj-page-gj-solutions-note {
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-left: 3px solid var(--gj-blue);
  border-radius: var(--gj-radius-card);
}
.jj-page-gj-solutions-note p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-solutions-note strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}

/* ============================================================
   S5 OCCUPATIONS — 3-col card grid
   ============================================================ */

.jj-page-gj-occupations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jj-page-gj-occupation-card {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  padding: 20px 22px;
}
.jj-page-gj-occupation-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gj-blue);
  margin: 0 0 10px;
}
.jj-page-gj-occupation-h {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 0 0 8px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-occupation-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-occupations-note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--gj-text-aux);
  overflow-wrap: anywhere;
}
.jj-page-gj-occupations-note a {
  color: var(--gj-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.jj-page-gj-occupations-note a:hover {
  color: var(--gj-blue-dark);
}
.jj-page-gj-occupations-note strong {
  font-weight: 600;
}

/* ============================================================
   S6 FLOW — 5 steps horizontal (PC) / stacked (mobile)
   ============================================================ */

.jj-page-gj-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.jj-page-gj-flow-step {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jj-page-gj-flow-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gj-blue);
}
.jj-page-gj-flow-body {
  display: block;
}
.jj-page-gj-flow-h {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 0 0 6px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-flow-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-flow-text strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}
.jj-page-gj-flow-note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--gj-text-aux);
  overflow-wrap: anywhere;
}
.jj-page-gj-flow-note strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}

/* ============================================================
   S7 COMPARISON — table (3 columns), JJ column highlighted
   ============================================================ */

.jj-page-gj-comparison-wrap {
  overflow-x: auto;
  border-radius: var(--gj-radius-card);
  border: 1px solid var(--gj-border);
}
.jj-page-gj-comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: var(--gj-bg-white);
  font-size: 15px;
}
.jj-page-gj-comparison-table thead {
  background: var(--gj-bg-section-alt);
}
.jj-page-gj-comparison-table th,
.jj-page-gj-comparison-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gj-border);
  vertical-align: top;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.jj-page-gj-comparison-table thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gj-text-strong);
}
.jj-page-gj-comparison-table .jj-page-gj-comparison-th-jj,
.jj-page-gj-comparison-table .jj-page-gj-comparison-jj {
  background: var(--gj-blue-light);
  color: var(--gj-text-strong);
}
.jj-page-gj-comparison-table .jj-page-gj-comparison-th-jj {
  color: var(--gj-blue);
  font-weight: 700;
}
.jj-page-gj-comparison-table .jj-page-gj-comparison-topic {
  font-weight: 500;
  color: var(--gj-text-strong);
  background: var(--gj-bg-section-alt);
  width: 18%;
}
.jj-page-gj-comparison-table .jj-page-gj-comparison-common {
  color: var(--gj-text-body);
}
.jj-page-gj-comparison-table .jj-page-gj-comparison-jj strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}
.jj-page-gj-comparison-table tbody tr:last-child th,
.jj-page-gj-comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.jj-page-gj-comparison-note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gj-text-aux);
  overflow-wrap: anywhere;
}
.jj-page-gj-comparison-note strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}

/* ============================================================
   S8 STANCE + MID-CTA — combined transparency block
   ============================================================ */

.jj-page-gj-stance-section {
  background: var(--gj-bg-section-alt);
  padding: var(--gj-section-py-pc) 0;
}
.jj-page-gj-stance {
  max-width: 800px;
  margin: 0 auto;
}
.jj-page-gj-stance .jj-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gj-blue);
}
.jj-page-gj-stance .jj-h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 8px 0 16px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-stance-intro {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gj-text-body-strong);
  margin: 0 0 32px;
  overflow-wrap: anywhere;
}

.jj-page-gj-stance-quote {
  margin: 0 0 32px;
  padding: 24px 28px;
  background: var(--gj-bg-white);
  border-left: 3px solid var(--gj-blue);
  border-radius: 0 var(--gj-radius-card) var(--gj-radius-card) 0;
}
.jj-page-gj-stance-quote-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gj-blue);
  margin: 0 0 10px;
}
.jj-page-gj-stance-quote-body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: 17px;
  line-height: 1.95;
  color: var(--gj-text-strong);
  margin: 0;
  overflow-wrap: anywhere;
}

.jj-page-gj-stance-detail {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gj-text-body-strong);
  margin: 0 0 24px;
  overflow-wrap: anywhere;
}

.jj-page-gj-stance-data {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
}
.jj-page-gj-stance-data-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--gj-text-body);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-stance-data-body + .jj-page-gj-stance-data-body {
  margin-top: 14px;
}
.jj-page-gj-stance-data-num {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  color: var(--gj-blue);
  margin: 0 2px;
  letter-spacing: 0.01em;
}

.jj-page-gj-stance-closing {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gj-text-strong);
  font-weight: 500;
  margin: 0;
  overflow-wrap: anywhere;
}

/* HOTFIX v1.3.2: Mid CTA ブロック撤去 (Q3 上書き)。
   .jj-page-gj-mid-cta / -h / -body / -action のスタイルは不要となったため削除。
   Final CTA + Footer CTA で CTA 露出は十分。姿勢ブロックの余韻を残す。 */

/* Phase 12-A.6 (2026-05-21): .jj-page-gj-cta-sublink rule 撤去。
   final-cta から「会社案内・資料をご希望」サブリンクが廃止されて dead code 化、削除。
   理由: 資料請求機能の実体が存在しないため、ブランド信頼性確保のため
   全サイトから資料請求 CTA を撤去。無料相談 1 本に統一。 */

/* ============================================================
   S9 FAQ — details/summary accordion (JS-free)
   ============================================================ */

.jj-page-gj-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jj-page-gj-faq-item {
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
}
.jj-page-gj-faq-item[open] {
  border-color: var(--gj-border-strong);
}
.jj-page-gj-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  list-style: none;
}
.jj-page-gj-faq-q::-webkit-details-marker {
  display: none;
}
.jj-page-gj-faq-q-text {
  flex: 1 1 auto;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-faq-q-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
  color: var(--gj-blue);
}
.jj-page-gj-faq-q-icon::before,
.jj-page-gj-faq-q-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 200ms ease;
}
.jj-page-gj-faq-q-icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.jj-page-gj-faq-q-icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.jj-page-gj-faq-item[open] .jj-page-gj-faq-q-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.jj-page-gj-faq-a {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--gj-text-body);
}
.jj-page-gj-faq-a p {
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-faq-a p + p {
  margin-top: 14px;
}
.jj-page-gj-faq-a strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}
.jj-page-gj-faq-subblock {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--gj-bg-section-alt);
  border-radius: var(--gj-radius-card);
}
.jj-page-gj-faq-sub-h {
  font-size: 14px;
  font-weight: 600;
  color: var(--gj-text-strong);
  margin: 0 0 6px;
}
.jj-page-gj-faq-subblock p {
  font-size: 14px;
  margin: 0;
}

/* ============================================================
   S10 RELATED — 3 link cards
   ============================================================ */

.jj-page-gj-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jj-page-gj-related-card {
  position: relative;
  display: block;
  padding: 24px 28px 24px 24px;
  background: var(--gj-bg-white);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--jj-transition-fast, 150ms ease),
              transform var(--jj-transition-fast, 150ms ease);
}
.jj-page-gj-related-card:hover {
  border-color: var(--gj-blue);
}
.jj-page-gj-related-h {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gj-text-strong);
  margin: 0 0 6px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-related-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gj-text-aux);
  margin: 0;
}
.jj-page-gj-related-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--gj-blue);
  transition: transform var(--jj-transition-fast, 150ms ease);
}
.jj-page-gj-related-card:hover .jj-page-gj-related-arrow {
  transform: translateY(-50%) translateX(4px);
}

/* ============================================================
   S11 FINAL CTA
   ============================================================ */

.jj-page-gj-final-cta {
  padding: var(--gj-section-py-pc) 0;
  background: linear-gradient(180deg, var(--gj-bg-white) 0%, var(--gj-blue-light) 100%);
}
.jj-page-gj-final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--jj-container-padding-x, 16px);
  text-align: center;
}
.jj-page-gj-final-cta-h {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gj-text-h1);
  margin: 0 0 20px;
  word-break: keep-all;
  line-break: strict;
}
.jj-page-gj-final-cta-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gj-text-body-strong);
  margin: 0 0 28px;
  overflow-wrap: anywhere;
}
.jj-page-gj-final-cta-body strong {
  font-weight: 600;
  color: var(--gj-text-strong);
}
.jj-page-gj-final-cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.jj-page-gj-final-cta-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  font-size: 14px;
  color: var(--gj-text-aux);
  margin: 0;
  overflow-wrap: anywhere;
}
.jj-page-gj-final-cta-reassure-sep {
  color: var(--gj-text-mute);
}

/* ============================================================
   RESPONSIVE — Tablet (768-1023.98px)
   ============================================================ */

@media (max-width: 1023.98px) {
  .jj-page-gj-section {
    padding: var(--gj-section-py-tablet) 0;
  }
  .jj-page-gj-hero {
    padding: var(--gj-section-py-tablet) 0;
  }
  .jj-page-gj-final-cta {
    padding: var(--gj-section-py-tablet) 0;
  }
  .jj-page-gj-stance-section {
    padding: var(--gj-section-py-tablet) 0;
  }

  /* Hero grid → single column (写真は下に積み重なる) */
  .jj-page-gj-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .jj-page-gj-h1 {
    font-size: 32px;
  }

  /* Stats 4 → 2 */
  .jj-page-gj-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jj-page-gj-stat-num {
    font-size: 32px;
  }

  /* Occupations 3 → 2 */
  .jj-page-gj-occupations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Flow 5 → 2 columns wrap */
  .jj-page-gj-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Related 3 → 1 */
  .jj-page-gj-related-grid {
    grid-template-columns: 1fr;
  }

  .jj-page-gj .jj-section-head .jj-h2 {
    font-size: 22px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (<= 767.98px)
   ============================================================ */

@media (max-width: 767.98px) {
  .jj-page-gj-section {
    padding: var(--gj-section-py-mobile) 0;
  }
  .jj-page-gj-hero {
    padding: 40px 0 var(--gj-section-py-mobile);
  }
  .jj-page-gj-final-cta {
    padding: var(--gj-section-py-mobile) 0;
  }
  .jj-page-gj-stance-section {
    padding: var(--gj-section-py-mobile) 0;
  }

  /* Hero typography */
  .jj-page-gj-h1 {
    font-size: 26px;
    line-height: 1.5;
  }
  .jj-page-gj-lead {
    font-size: 15px;
    line-height: 1.85;
  }

  /* Stats: keep 2 cols on mobile (already from tablet) */
  .jj-page-gj-stats {
    padding: 40px 0;
  }
  .jj-page-gj-stat {
    padding: 18px 14px;
  }
  .jj-page-gj-stat-num {
    font-size: 28px;
  }

  /* Challenges / Solutions: 2 → 1 col */
  .jj-page-gj-challenges-grid,
  .jj-page-gj-solutions-grid {
    grid-template-columns: 1fr;
  }
  .jj-page-gj-challenge-card,
  .jj-page-gj-solution-card {
    padding: 20px;
  }
  .jj-page-gj-challenge-h,
  .jj-page-gj-solution-h {
    font-size: 17px;
  }
  .jj-page-gj-challenge-body,
  .jj-page-gj-solution-body {
    font-size: 15px;
  }

  /* Occupations 2 → 1 */
  .jj-page-gj-occupations-grid {
    grid-template-columns: 1fr;
  }

  /* Flow: 2 → 1 col stack */
  .jj-page-gj-flow {
    grid-template-columns: 1fr;
  }

  /* Stance: tighter spacing */
  .jj-page-gj-stance .jj-h2 {
    font-size: 22px;
  }
  .jj-page-gj-stance-quote {
    padding: 20px 22px;
  }
  .jj-page-gj-stance-quote-body {
    font-size: 16px;
  }

  /* FAQ tighter */
  .jj-page-gj-faq-q {
    padding: 16px 18px;
    font-size: 15px;
  }
  .jj-page-gj-faq-a {
    padding: 0 18px 18px;
    font-size: 14.5px;
  }

  /* Final CTA */
  .jj-page-gj-final-cta-h {
    font-size: 22px;
  }

  /* Section head */
  .jj-page-gj .jj-section-head .jj-h2 {
    font-size: 20px;
  }
  .jj-page-gj .jj-section-head .jj-section-lede {
    font-size: 15px;
  }
}

/* ============================================================
   PRINT — minor adjustments (safe defaults)
   ============================================================ */

@media print {
  .jj-page-gj-hero {
    background: var(--gj-bg-white);
  }
  .jj-page-gj-final-cta {
    background: var(--gj-bg-white);
  }
}