/* =============================================
   support-academy.css | ガイドライン対応サポートアカデミー LP専用スタイル
   共通スタイルは common-design.css を参照
   カラーパレット: Navy #032647（基調） / Gold #c9a227（アクセント）
   ============================================= */

:root {
  --sa-navy     : var(--oc-navy);
  --sa-navy-deep: #021323;
}

/* ── レイアウトリセット（full-width ヒーロー用） ── */
body.page_support-academy {
  overflow-x: hidden;
}

body.page_support-academy main#contents {
  max-width     : none;
  width         : 100%;
  padding-left  : 0;
  padding-right : 0;
  padding-bottom: 0;
}

body.page_support-academy #locator_template_c2 .inner {
  max-width   : none !important;
  margin-left : 0    !important;
  padding-left: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px))) !important;
}

/* ── oc-container をヒーローと同じ幅(1440px)に拡張 ── */
body.page_support-academy .oc-container {
  max-width     : 1440px;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ── CSS変数（ゴールド系）── */
:root {
  --sa-gold      : #c9a227;
  --sa-gold-light: #f2d98a;
  --sa-gold-dark : #97730f;
  --sa-bg-alt    : #e2e7f0;
}

/* ── 低→高 4段階カラースケール（ピラミッド軸・ボックス共通）── */
:root {
  --sa-scale-1: #c3ccd6;         /* 低：トーンを落とした薄い紺 */
  --sa-scale-2: var(--oc-navy);  /* ★3：紺 */
  --sa-scale-3: var(--sa-gold-dark); /* ★4：ゴールド寄りの濃いゴールド */
  --sa-scale-4: var(--sa-gold);  /* 高：ゴールド */
}

/* ── アンカースクロール時のヘッダー分オフセット ── */
body.page_support-academy #sa-scs,
body.page_support-academy #sa-academy,
body.page_support-academy #sa-pricing,
body.page_support-academy #sa-campaign,
body.page_support-academy #sa-contact {
  scroll-margin-top: 110px;
}

/* BowNowが確認画面表示時に任意の要素へスクロールしても、
   固定ヘッダー分のオフセットが常に効くようにする保険 */
html {
  scroll-padding-top: 110px;
}

/* =============================================
   ヒーロー（背景画像はHTML側でstyle属性指定／これはフォールバック色）
   ============================================= */
body.page_support-academy .page-header.oc-hero {
  background-color: var(--sa-navy-deep);
}

/* 背景写真の上に敷く暗めのグラデーション（テキストの可読性を確保／右半分は素の写真を見せるため透明に） */
body.page_support-academy .oc-hero::before {
  background: linear-gradient(110deg, rgba(2, 19, 35, 0.88) 0%, rgba(2, 19, 35, 0.5) 40%, rgba(2, 19, 35, 0) 55%, rgba(2, 19, 35, 0) 100%);
}

.sa-hero-tag {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 6px 16px;
  background     : rgba(201, 162, 39, 0.14);
  border         : 1px solid rgba(201, 162, 39, 0.55);
  border-radius  : 100px;
  color          : var(--sa-gold-light);
  font-size      : clamp(15px, 1.6vw, 19px);
  font-weight    : 700;
  letter-spacing : 0.03em;
  margin-bottom  : 18px;
}

.sa-hero-question {
  color      : #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  margin     : 0 0 18px;
}

.sa-hero-question-highlight {
  color : var(--sa-gold-light);
  margin: 0 0.2em;
}

.page-header.oc-hero .page-header__title.sa-hero-title {
  color      : #fff;
  font-size  : clamp(24px, 3.2vw, 42px);
  line-height: 1.4;
  margin-bottom: 32px;
}

.sa-hero-title .sa-hero-accent {
  color: var(--sa-gold-light);
}

.sa-hero-title .sa-hero-accent--rich {
  background         : linear-gradient(100deg, var(--sa-gold-light) 0%, var(--sa-gold) 45%, var(--sa-gold-dark) 75%, var(--sa-gold) 100%);
  -webkit-background-clip: text;
  background-clip     : text;
  color                : transparent;
}

.sa-hero-lead {
  color      : rgba(255, 255, 255, 0.86);
  font-size  : clamp(13px, 1.2vw, 16px);
  line-height: 1.85;
  max-width  : 620px;
  margin     : 0 0 28px;
}

.sa-hero-ctas {
  display  : flex;
  flex-wrap: wrap;
  gap      : 14px;
}

a.sa-cta {
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  padding        : 13px 28px;
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : clamp(12px, 1vw, 14px);
  font-weight    : 700;
  letter-spacing : 0.03em;
  text-decoration: none !important;
  border         : 2px solid transparent;
  transition     : background-color 0.25s var(--oc-ease), color 0.25s var(--oc-ease), border-color 0.25s var(--oc-ease);
}

a.sa-cta-gold {
  background  : linear-gradient(135deg, var(--sa-gold) 0%, var(--sa-gold-dark) 100%);
  color       : var(--sa-navy-deep) !important;
  border-color: var(--sa-gold-dark);
}

a.sa-cta-gold:hover,
a.sa-cta-gold:focus-visible {
  background  : linear-gradient(135deg, var(--sa-gold-light) 0%, var(--sa-gold) 100%);
  border-color: var(--sa-gold);
}

a.sa-cta-outline {
  background: transparent;
  color     : #fff !important;
  border-color: rgba(255, 255, 255, 0.55);
}

a.sa-cta-outline:hover,
a.sa-cta-outline:focus-visible {
  border-color: #fff;
  background  : rgba(255, 255, 255, 0.1);
}

/* =============================================
   共通セクション
   ============================================= */
.sa-section {
  padding: 100px 0;
}

section.sa-bg-alt {
  background: var(--sa-bg-alt);
}

body.page_support-academy .oc-section-heading {
  border-top     : none;
  padding-bottom : 22px;
}

body.page_support-academy .oc-section-heading .oc-label {
  color: var(--sa-gold-dark);
}

.sa-heading-note {
  font-size  : clamp(15px, 1.6vw, 18px);
  font-weight: 700;
}

.sa-heading-row {
  display    : flex;
  align-items: baseline;
  flex-wrap  : wrap;
  gap        : 12px;
}

.sa-heading-price-note {
  font-size: 12px;
  font-weight: 500;
  color    : var(--oc-text);
}

/* 見出し直下のセクションは上パディングを詰めて余白を圧縮 */
body.page_support-academy .oc-section-heading + .sa-section {
  padding-top: 28px;
}

.sa-lead {
  font-size  : clamp(14px, 1.3vw, 16px);
  line-height: 2;
  color      : var(--oc-text);
  margin     : 0 0 40px;
}

/* =============================================
   ①SCS評価制度とは？ ─ 星レベル・ピラミッド
   左: 高低グラデーション軸＋説明タグ／右: ピラミッド
   ============================================= */
.sa-star-ladder {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin: 0 0 48px;
}

/* ── 高低グラデーション軸 ── */
.sa-star-axis {
  flex-shrink   : 0;
  width         : 34px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
}

.sa-star-axis-dot {
  flex-shrink    : 0;
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  font-size      : 12px;
  font-weight    : 700;
}

.sa-star-axis-dot--high { background: var(--sa-scale-4); color: var(--sa-navy-deep); }
.sa-star-axis-dot--low  { background: var(--sa-scale-1); color: var(--oc-navy); }

.sa-star-axis-bar {
  flex         : 1;
  width        : 6px;
  border-radius: 3px;
  background   : linear-gradient(to top, var(--sa-scale-1) 0%, var(--sa-scale-2) 33%, var(--sa-scale-3) 66%, var(--sa-scale-4) 100%);
}

/* ── ピラミッド本体 ── */
.sa-star-rows {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
  min-width     : 0;
}

.sa-star-row-group {
  display    : flex;
  align-items: center;
  gap        : 16px;
}

.sa-star-tag {
  flex-shrink   : 0;
  width         : 190px;
  padding       : 10px 26px 10px 16px;
  background    : var(--sa-navy);
  color         : #fff;
  font-size     : 12.5px;
  font-weight   : 700;
  line-height   : 1.5;
  text-align    : center;
  clip-path     : polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

.sa-star-box-wrap {
  flex     : 1;
  min-width: 0;
}

.sa-star-row {
  display        : grid;
  grid-template-columns: 90px 1fr;
  align-items    : center;
  gap            : 18px;
  padding        : 16px 24px;
  color          : #fff;
  position       : relative;
}

.sa-star-row--5  { width: 70%; margin-left: 30%; background: var(--sa-scale-4); color: var(--sa-navy-deep); }
.sa-star-row--4  { width: 58%; margin-left: 20%; background: var(--sa-scale-3); color: #fff; }
.sa-star-row--3  { width: 46%; margin-left: 10%; background: var(--sa-scale-2); color: #fff; }
.sa-star-row--12 { width: 34%; margin-left: 0;   background: var(--sa-scale-1); color: var(--oc-navy); }

.sa-star-level {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size  : clamp(13px, 1.4vw, 16px);
  white-space: nowrap;
}

.sa-star-stars {
  display   : block;
  color     : var(--sa-gold-light);
  font-size : clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

.sa-star-row--5 .sa-star-stars  { color: #fff; }
.sa-star-row--4 .sa-star-stars  { color: #fff; }
.sa-star-row--3 .sa-star-stars  { color: var(--sa-gold-light); }
.sa-star-row--12 .sa-star-stars { color: var(--oc-navy); margin-bottom: 0; }

.sa-star-desc {
  margin     : 0;
  font-size  : clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  line-height: 1.6;
}

.sa-star-desc-highlight {
  padding      : 1px 6px;
  border-radius: 3px;
  background   : rgba(255, 255, 255, 0.3);
}

.sa-star-badge {
  position  : absolute;
  left      : 100%;
  margin-left: 16px;
  top       : 50%;
  transform : translateY(-50%);
  background: #a81220;
  border    : 1px solid #a81220;
  color     : #fff;
  font-size : 11px;
  font-weight: 700;
  padding   : 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.sa-star-note {
  margin     : 20px 0 0;
  font-size  : 12px;
  line-height: 1.8;
  color      : var(--oc-text);
}

.sa-star-note-link {
  color      : var(--sa-gold-dark);
  font-weight: 700;
}

/* ── サブ見出し（POINT等）── */
.sa-subheading {
  margin-top   : 128px;
  margin-bottom: 20px;
}

.sa-subheading-label {
  display      : inline-block;
  font-family  : 'Noto Sans JP', sans-serif;
  font-size    : 13px;
  font-weight  : 700;
  letter-spacing: 0.05em;
  color        : #fff;
  background   : var(--sa-navy);
  padding      : 5px 14px;
  margin-bottom: 10px;
}

.sa-subheading h3 {
  margin     : 0;
  font-size  : clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color      : var(--sa-navy);
}

/* 取引先からのSCS評価制度取得要請／Pマーク事例 */
.sa-precedent {
  display      : flex;
  align-items  : stretch;
  gap          : clamp(32px, 5vw, 64px);
  margin-bottom: 0;
}

.sa-precedent-text {
  flex     : 1;
  min-width: 0;
}

.sa-precedent-lead {
  font-size  : clamp(14px, 1.3vw, 16px);
  font-weight: 700;
  line-height: 2;
  color      : var(--sa-navy);
  margin     : 0 0 16px;
}

.sa-precedent-text > p {
  font-size  : clamp(14px, 1.3vw, 16px);
  line-height: 2;
  color      : var(--oc-text);
  margin     : 0 0 28px;
}

.sa-warning-box {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  margin       : 0 0 28px;
  padding      : 18px 22px;
  background   : rgba(168, 18, 32, 0.06);
  border       : 2px solid #a81220;
}

.sa-warning-icon {
  flex-shrink    : 0;
  position       : relative;
  width          : 36px;
  height         : 32px;
  display        : flex;
  align-items    : flex-end;
  justify-content: center;
  padding-bottom  : 3px;
}

.sa-warning-icon::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: #a81220;
  clip-path : polygon(50% 0%, 0% 100%, 100% 100%);
}

.sa-warning-icon-mark {
  position   : relative;
  z-index    : 1;
  color      : #fff;
  font-weight: 800;
  font-size  : 15px;
  line-height: 1;
}

.sa-warning-text {
  margin     : 0;
  font-size  : clamp(14px, 1.3vw, 16px);
  font-weight: 700;
  line-height: 1.8;
  color      : #a81220;
}

.sa-precedent-case {
  background   : var(--sa-bg-alt);
  border-left  : 4px solid var(--sa-navy);
  padding      : 24px 28px;
  margin-bottom: 28px;
}

.sa-precedent-case h4 {
  margin     : 0 0 16px;
  font-size  : clamp(14px, 1.3vw, 15px);
  font-weight: 700;
  color      : var(--sa-navy);
}

.sa-precedent-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

.sa-precedent-list li {
  position    : relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size   : clamp(14px, 1.3vw, 16px);
  line-height : 2;
  color       : var(--oc-text);
}

.sa-precedent-list li:last-child {
  margin-bottom: 0;
}

.sa-precedent-list li::before {
  content   : '';
  position  : absolute;
  left      : 0;
  top       : 0.7em;
  width     : 10px;
  height    : 2px;
  background: var(--sa-navy);
}

/* イラスト・図解プレースホルダー（大きめに確保） */
.sa-precedent-visual {
  flex-shrink    : 0;
  width          : clamp(240px, 32vw, 420px);
  display        : flex;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 16px;
}

.sa-precedent-visual img {
  max-width : 100%;
  max-height: 100%;
  width     : auto;
  object-fit: contain;
}

/* 遷移バナー */
.sa-transition-banner {
  position       : relative;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  width          : 100vw;
  margin-inline  : calc(50% - 50vw);
  margin-top     : 0;
  margin-bottom  : -100px;
  padding        : clamp(90px, 12vw, 160px) 24px 96px;
  background     : linear-gradient(135deg, rgba(201, 162, 39, 0.35), rgba(3, 38, 71, 0.12));
  color          : var(--sa-navy);
  font-weight    : 700;
  font-size      : clamp(20px, 2.2vw, 26px);
  text-align     : center;
  overflow       : hidden;
}

/* 上のセクション（白背景）からの下向き三角形の切り込み */
.sa-transition-banner::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : clamp(36px, 6vw, 90px);
  background: #fff;
  clip-path : polygon(0 0, 100% 0, 50% 100%);
}

.sa-transition-banner .sa-gold-text {
  color: var(--sa-gold-dark);
}

.sa-transition-content {
  display       : inline-flex;
  flex-direction: column;
  align-items   : center;
  gap           : 14px;
}

.sa-transition-logo {
  display    : inline-flex;
  align-items: center;
}

.sa-transition-logo img {
  display: block;
  height : clamp(48px, 6vw, 68px);
  width  : auto;
}

.sa-transition-disclaimer {
  position  : absolute;
  right     : 24px;
  bottom    : 10px;
  font-size : 11px;
  font-weight: 700;
  color     : var(--sa-navy);
  text-align: right;
}

/* =============================================
   ②アカデミーとは？ ─ 4つのアクション
   ============================================= */
.sa-action-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 20px;
  margin-bottom        : 20px;
}

.sa-action-card {
  background : #fff;
  border     : 1px solid var(--oc-border);
  padding    : 26px 20px;
  position   : relative;
}

/* 比較用パターンラベル */
/* 画像プレースホルダー（差し替え前提／推奨サイズ 約400×400px） */
.sa-action-img-ph {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  width          : 120px;
  height         : 120px;
  margin         : 0 auto 16px;
  text-align     : center;
  overflow       : hidden;
}

.sa-action-img-ph img {
  max-width : 100%;
  max-height: 100%;
  width     : auto;
  object-fit: contain;
}

/* パターン②：カード幅画像プレースホルダー */
.sa-action-img-ph--wide {
  width          : calc(100% + 40px);
  height         : auto;
  aspect-ratio   : 400 / 240;
  margin         : 0 -20px 16px;
  border-radius  : 0;
  border-width   : 0 0 2px;
  justify-content: flex-start;
}

.sa-action-title {
  font-size  : clamp(13px, 1.3vw, 15px);
  font-weight: 700;
  color      : var(--sa-navy);
  margin     : 0 0 10px;
  line-height: 1.6;
}

.sa-action-step {
  margin-right: 4px;
}

.sa-action-service {
  display       : block;
  width         : calc(100% + 40px);
  margin        : -26px -20px 0;
  padding       : 8px 20px;
  font-size     : 12.5px;
  font-weight   : 700;
  letter-spacing: 0.05em;
  color         : #fff;
  background    : var(--sa-navy);
  text-align    : center;
}

.sa-action-card p.sa-action-desc {
  margin     : 0;
  font-size  : 12.5px;
  line-height: 1.8;
  color      : #555;
}

/* 個別相談カード（全アクション共通の提供サービス） */
.sa-consult-card {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 24px;
  background     : var(--sa-navy);
  border-radius  : 0;
  padding        : 26px 48px;
  color          : #fff;
  margin-bottom  : 56px;
  text-align     : center;
}

.sa-consult-arrow {
  display    : flex;
  align-items: center;
  flex-shrink: 0;
  width      : 72px;
}

.sa-consult-arrow-line {
  flex      : 1;
  height    : 2px;
  background: #fff;
}

.sa-consult-arrow-head {
  flex-shrink : 0;
  width       : 0;
  height      : 0;
  border-top  : 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.sa-consult-arrow-head--right {
  margin-left: -1px;
  border-left: 7px solid #fff;
}

.sa-consult-arrow-head--left {
  margin-right: -1px;
  border-right: 7px solid #fff;
}

.sa-consult-body {
  flex: 1;
}

.sa-consult-body p {
  margin     : 4px 0 0;
  font-size  : clamp(12.5px, 1.1vw, 14px);
  line-height: 1.8;
  color      : rgba(255, 255, 255, 0.85);
}

.sa-consult-body h4 {
  margin     : 0;
  font-size  : clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  color      : #fff;
}

.sa-disclaimer-box {
  margin     : 24px 0 0;
  padding    : 18px 22px;
  border     : 1px solid var(--sa-navy);
  font-size  : 12px;
  line-height: 1.8;
  color      : var(--oc-text);
}

.sa-disclaimer-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

.sa-disclaimer-list li {
  position    : relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
}

.sa-disclaimer-list li:last-child {
  margin-bottom: 0;
}

.sa-disclaimer-list li::before {
  content : '◎';
  position: absolute;
  left    : 0;
  top     : 0;
}

/* 比較表 */
.sa-diff-lead {
  font-size  : clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  color      : var(--sa-navy);
  line-height: 1.8;
  margin     : 0 0 28px;
}

.sa-diff-title {
  font-size  : clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  color      : var(--sa-navy);
  margin     : 128px 0 8px;
}

.sa-diff-sub {
  font-size  : clamp(13px, 1.2vw, 15px);
  color      : var(--oc-text);
  line-height: 1.8;
  margin     : 0 0 28px;
}

.sa-table-scroll {
  overflow-x                : auto;
  -webkit-overflow-scrolling: touch;
  border                    : 1px solid var(--oc-border);
}

table.sa-diff-table {
  width          : 100%;
  min-width      : 560px;
  border-collapse: collapse;
  font-size      : clamp(12.5px, 1.2vw, 14px);
  background     : #fff;
}

table.sa-diff-table th,
table.sa-diff-table td {
  padding      : 16px 18px;
  text-align   : center;
  vertical-align: top;
  border-bottom: 1px solid var(--oc-border);
}

table.sa-diff-table thead th {
  background : var(--sa-navy);
  color      : #fff;
  font-weight: 700;
  white-space: nowrap;
}

table.sa-diff-table thead th.sa-diff-highlight {
  background: var(--sa-gold-dark);
}

table.sa-diff-table th.sa-diff-highlight,
table.sa-diff-table td.sa-diff-highlight {
  border-left : 5px solid var(--sa-gold);
  border-right: 5px solid var(--sa-gold);
}

table.sa-diff-table thead th.sa-diff-highlight {
  border-top: 5px solid var(--sa-gold);
}

table.sa-diff-table tbody tr:last-child td.sa-diff-highlight {
  border-bottom: 5px solid var(--sa-gold);
}


table.sa-diff-table thead th.sa-diff-blank {
  background: transparent !important;
  border-bottom-color: var(--oc-border);
}

table.sa-diff-table tbody th {
  width      : 120px;
  background : var(--sa-navy);
  color      : #fff;
  font-weight: 700;
  white-space: nowrap;
}

table.sa-diff-table tbody td.sa-diff-highlight {
  background: rgba(201, 162, 39, 0.08);
  font-weight: 700;
}

/* =============================================
   ③料金体系
   ============================================= */
/* ── プランのグループ帯（学習・実践ベーシック／実践ライト）── */
.sa-plan-banners {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 24px;
  margin-bottom        : 16px;
}

.sa-plan-banner {
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--sa-navy);
  color          : #fff;
  font-size      : clamp(12px, 1.1vw, 14px);
  font-weight    : 700;
  padding        : 14px 16px;
  text-align     : center;
  line-height    : 1.5;
}

.sa-plan-banner--wide {
  grid-column: span 2;
}

.sa-plan-banner-highlight {
  display      : inline-block;
  margin-inline: 0.2em;
  color        : var(--sa-gold-light);
  font-size    : clamp(15px, 1.5vw, 19px);
}

.sa-plan-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 24px;
  align-items          : stretch;
  margin-bottom        : 140px;
}

/* プランごとのテーマカラー */
.sa-plan-card--basic    { --sa-plan-accent: #8b8f96; }
.sa-plan-card--practice { --sa-plan-accent: var(--sa-gold); }
.sa-plan-card--light    { --sa-plan-accent: #2f9e94; }

.sa-plan-card {
  display       : flex;
  flex-direction: column;
  background    : #fff;
  border        : 1px solid var(--oc-border);
  position      : relative;
}

.sa-plan-arrow-down {
  position   : absolute;
  left       : 50%;
  bottom     : -104px;
  transform  : translateX(-50%);
  font-size  : 84px;
  line-height: 1;
  color      : var(--sa-navy);
}

.sa-plan-ribbon {
  position      : absolute;
  top           : 14px;
  right         : 14px;
  background    : #a81220;
  color         : #fff;
  font-size     : 11px;
  font-weight   : 700;
  padding       : 6px 16px;
  letter-spacing: 0.05em;
  border-radius : 999px;
  z-index       : 1;
}

.sa-plan-head {
  background: var(--sa-plan-accent, var(--sa-navy));
  color     : #fff;
  padding   : 24px 24px 20px;
  text-align: center;
}

.sa-plan-head h3 {
  margin     : 0 0 12px;
  font-size  : clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.45;
}

.sa-plan-head-rule {
  display   : block;
  width     : 56%;
  height    : 2px;
  margin    : 0 auto;
  background: rgba(255, 255, 255, 0.6);
}

.sa-plan-body {
  flex   : 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.sa-plan-price-area {
  min-height: 96px;
}

.sa-price-block-row {
  display: flex;
  gap    : 16px;
}

.sa-price-block-row .sa-price-block {
  flex: 1;
  min-width: 0;
}

.sa-price-block-row .sa-price-block + .sa-price-block {
  margin-top  : 0;
  padding-top : 0;
  padding-left: 16px;
  border-top  : none;
  border-left : 1px dashed var(--oc-border);
}

.sa-price-block-label {
  display      : inline-block;
  font-size    : 11px;
  font-weight  : 700;
  color        : #fff;
  background   : var(--sa-navy);
  padding      : 2px 10px;
  margin-bottom: 8px;
}

.sa-price {
  font-family: 'IBM Plex Sans', sans-serif;
  color      : var(--sa-navy);
}

.sa-price .num {
  font-size  : clamp(24px, 2.6vw, 30px);
  font-weight: 700;
}

.sa-price .unit {
  font-size: 13px;
  font-weight: 700;
}

.sa-price-term {
  font-size: 12.5px;
  color    : #666;
  margin   : 4px 0 0;
}

.sa-plan-merit-bubble {
  position      : relative;
  display       : block;
  text-align    : center;
  background    : var(--sa-plan-accent, var(--sa-navy));
  color         : #fff;
  font-size     : 13px;
  font-weight   : 700;
  padding       : 10px 16px;
  margin        : 20px 0 26px;
  border-radius : 6px;
}

.sa-plan-merit-bubble::after {
  content     : '';
  position    : absolute;
  left        : 50%;
  bottom      : -8px;
  transform   : translateX(-50%);
  border-left : 8px solid transparent;
  border-right: 8px solid transparent;
  border-top  : 8px solid var(--sa-plan-accent, var(--sa-navy));
}

.sa-plan-merit {
  list-style: none;
  margin    : 0 0 20px;
  padding   : 0;
  flex      : 1;
}

.sa-plan-merit li {
  display     : flex;
  align-items : flex-start;
  gap         : 10px;
  font-size   : 12.5px;
  line-height : 1.8;
  color       : #444;
  margin-bottom: 8px;
}

.sa-plan-merit li::before {
  content        : '✓';
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 18px;
  height         : 18px;
  margin-top     : 3px;
  border-radius  : 50%;
  background     : var(--sa-plan-accent, var(--sa-gold));
  color          : #fff;
  font-size      : 10px;
  font-weight    : 700;
  line-height    : 1;
}

/* ── キャンペーン ── */
.sa-campaign {
  background: linear-gradient(135deg, var(--sa-navy-deep) 0%, #0a3866 100%);
  color     : #fff;
  padding   : 48px clamp(24px, 5vw, 56px);
}

.sa-campaign-heading {
  text-align   : center;
  margin-bottom: 32px;
}

.sa-campaign-lead-text {
  margin     : 0 0 14px;
  color      : #fff;
  font-size  : clamp(13px, 1.3vw, 15px);
  font-weight: 700;
}

.sa-campaign-heading .sa-campaign-pill {
  display      : inline-block;
  margin       : 0;
  font-size    : clamp(20px, 2.4vw, 28px);
  font-weight  : 700;
  color        : #fff;
  background   : var(--sa-gold);
  padding      : 12px 32px;
  border-radius: 999px;
}

.sa-campaign-price {
  display        : flex;
  align-items    : baseline;
  justify-content: center;
  gap            : 16px;
  flex-wrap      : wrap;
  margin         : 8px 0 8px;
}

.sa-campaign-price .before {
  font-size      : clamp(16px, 1.6vw, 20px);
  color          : rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}

.sa-campaign-price .sa-campaign-arrow {
  font-size  : clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color      : var(--sa-gold-light);
}

.sa-campaign-price .after {
  font-family: 'IBM Plex Sans', sans-serif;
  color      : var(--sa-gold-light);
  font-size  : clamp(30px, 4vw, 46px);
  font-weight: 700;
}

.sa-campaign-price .after .unit {
  font-size: clamp(14px, 1.5vw, 18px);
}

.sa-campaign-note {
  text-align: center;
  font-size : clamp(14px, 1.4vw, 16px);
  color     : rgba(255, 255, 255, 0.85);
  margin    : 20px 0 0;
}

.sa-campaign-note-highlight {
  color      : var(--sa-gold-light);
  font-weight: 700;
  font-size  : clamp(16px, 1.6vw, 18px);
}

.sa-campaign-subnote {
  text-align: center;
  font-size : 13px;
  color     : rgba(255, 255, 255, 0.8);
  margin    : 0 0 32px;
}

/* ── 購入例タイムライン ── */
.sa-timeline {
  background: #fff;
  padding   : 28px clamp(16px, 3vw, 32px) 32px;
  overflow-x: auto;
}

.sa-timeline-subblock + .sa-timeline-subblock {
  margin-top: 56px;
}

.sa-timeline-subblock--divider {
  border-top : 1px dashed var(--oc-border);
  padding-top: 48px;
}

.sa-timeline-title {
  display      : inline-block;
  font-size    : 13px;
  font-weight  : 700;
  letter-spacing: 0.1em;
  color        : #fff;
  background   : var(--sa-navy);
  padding      : 5px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.sa-timeline-row {
  display     : flex;
  align-items : center;
  gap         : 16px;
  min-width   : 640px;
}

.sa-timeline-row + .sa-timeline-row {
  margin-top: 18px;
}

.sa-timeline-row-badge {
  flex-shrink  : 0;
  width        : 84px;
  padding      : 10px 8px;
  text-align   : center;
  font-size    : 10px;
  font-weight  : 700;
  line-height  : 1.4;
  border-radius: 6px;
  color        : #fff;
}

.sa-timeline-row-badge--campaign { background: #a81220; }
.sa-timeline-row-badge--none     { background: #8b8f96; }
.sa-timeline-row-badge--spacer   { background: transparent; }

.sa-timeline-phase-row {
  margin-bottom: 4px;
}

.sa-timeline-phase-item {
  flex-shrink: 1;
  flex-grow  : 1;
  flex-basis : 0;
  min-width  : 150px;
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.sa-timeline-phase-spacer {
  flex-shrink: 1;
  flex-grow  : 0;
  flex-basis : 0;
}

.sa-timeline-phase-group {
  display    : flex;
  align-items: center;
  flex       : 1;
  gap        : 8px;
  min-width  : 0;
}

.sa-timeline-phase-arrow {
  display    : flex;
  align-items: center;
  flex-shrink: 0;
  width      : 56px;
}

.sa-timeline-phase-arrow-line {
  flex      : 1;
  height    : 2px;
  background: var(--sa-navy);
}

.sa-timeline-phase-arrow-head {
  flex-shrink : 0;
  width       : 0;
  height      : 0;
  margin-left : -1px;
  border-top  : 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left : 6px solid var(--sa-navy);
}

.sa-timeline-phase-arrow--teal  .sa-timeline-phase-arrow-line { background: #2f9e94; }
.sa-timeline-phase-arrow--teal  .sa-timeline-phase-arrow-head { border-left-color: #2f9e94; }

.sa-timeline-phase-arrow--gold  .sa-timeline-phase-arrow-line { background: var(--sa-gold); }
.sa-timeline-phase-arrow--gold  .sa-timeline-phase-arrow-head { border-left-color: var(--sa-gold); }

.sa-timeline-phase-arrow--olive .sa-timeline-phase-arrow-line { background: var(--sa-gold-dark); }
.sa-timeline-phase-arrow--olive .sa-timeline-phase-arrow-head { border-left-color: var(--sa-gold-dark); }

.sa-timeline-phase-pill {
  flex-shrink  : 0;
  text-align   : center;
  padding      : 8px 14px;
  border-radius: 999px;
  font-size    : 12px;
  font-weight  : 700;
  line-height  : 1.5;
  color        : #fff;
  white-space  : nowrap;
}

.sa-timeline-phase-pill--teal  { background: #2f9e94; }
.sa-timeline-phase-pill--gold  { background: var(--sa-gold); color: var(--sa-navy-deep); }
.sa-timeline-phase-pill--olive { background: var(--sa-gold-dark); }

.sa-timeline-phase-term {
  font-size  : 11.5px;
  font-weight: 700;
  color      : var(--oc-text);
  white-space: nowrap;
}

/* ── 同じ色の列を縦につなぐ連結線（開始位置＝各列の左端）── */
.sa-timeline-body {
  position : relative;
  z-index  : 0;
  min-width: 640px;
}

.sa-timeline-connector {
  position: absolute;
  top     : 0;
  bottom  : 0;
  width   : 0;
  z-index : -1;
}

/* 列幅は 9:9:12（合計30）の比率に合わせて配置 */
.sa-timeline-connector--teal  { left: 100px; border-left: 1px dashed #2f9e94; }
.sa-timeline-connector--gold  { left: calc(100px + (100% - 120px) * 0.3 + 10px); border-left: 1px dashed var(--sa-gold); }
.sa-timeline-connector--olive { left: calc(100px + (100% - 120px) * 0.6 + 20px); border-left: 1px dashed var(--sa-gold-dark); }

/* 2列（新規購入／継続更新＋右側スペーサー）のシナリオ用の連結線位置。列幅比率は上と同じ 9:12:9 */
.sa-timeline-connector--teal2  { left: 100px; border-left: 1px dashed #2f9e94; }
.sa-timeline-connector--olive2 { left: calc(100px + (100% - 120px) * 0.3 + 10px); border-left: 1px dashed var(--sa-gold-dark); }

.sa-timeline-chevrons {
  display: flex;
  flex   : 1;
  gap    : 10px;
}

.sa-timeline-chevron {
  flex-shrink    : 1;
  flex-grow      : 1;
  flex-basis     : 0;
  min-width      : 150px;
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  padding        : 9px 0;
  clip-path      : polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
  color          : #fff;
}

.sa-timeline-chevron-inner {
  width     : 85%;
  text-align: center;
}

.sa-timeline-chevron--teal  { background: #2f9e94; }
.sa-timeline-chevron--gold  { background: var(--sa-gold); color: var(--sa-navy-deep); }
.sa-timeline-chevron--olive { background: var(--sa-gold-dark); }

.sa-timeline-chevron-title {
  margin     : 0 0 6px;
  font-size  : 12px;
  font-weight: 700;
  line-height: 1.5;
}

.sa-timeline-chevron-price {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  margin         : 0;
  font-family    : 'IBM Plex Sans', sans-serif;
  font-size      : clamp(14px, 1.5vw, 17px);
  font-weight    : 700;
}

.sa-timeline-chevron-price-label {
  display      : inline-block;
  margin-right : 0.3em;
  font-size    : 13px;
  font-weight  : 500;
  opacity      : 0.85;
}

.sa-timeline-chevron-price sup {
  font-size: 9px;
}

.sa-timeline-chevron-price-value {
  display       : inline-block;
  font-size     : clamp(22px, 2.8vw, 30px);
  font-weight   : 800;
  text-shadow   : 0 1px 3px rgba(0, 0, 0, 0.25);
}

.sa-campaign-total {
  text-align: center;
  font-size : 13px;
  color     : var(--oc-text);
  margin    : 20px 0 0;
  padding-top: 20px;
  border-top: 1px dashed var(--oc-border);
}

.sa-campaign-total strong {
  color: var(--sa-gold-dark);
}

/* ── キャンペーン注意書き ── */
.sa-note-grid {
  display   : flex;
  flex-direction: column;
  gap       : 40px;
  margin-top: 40px;
}

.sa-note-block h4 {
  margin      : 0 0 8px;
  padding-left: 16px;
  border-left : 3px solid var(--sa-gold);
  font-size   : 13px;
  font-weight : 700;
  color       : #fff;
}

.sa-note-list {
  list-style: none;
  margin    : 0;
  padding   : 0 0 0 16px;
}

.sa-note-list li {
  position    : relative;
  margin-bottom: 6px;
  padding-left: 1em;
  font-size   : 12px;
  line-height : 1.8;
  color       : rgba(255, 255, 255, 0.8);
}

.sa-note-list li::before {
  content : '・';
  position: absolute;
  left    : 0;
  top     : 0;
}

/* =============================================
   最終CTA
   ============================================= */
.sa-final-cta {
  position          : relative;
  background-image  : url('/dcms_media/image/support-academy-hero.jpg');
  background-repeat : no-repeat;
  background-position: right center;
  background-size   : cover;
  background-color  : #1e272e;
  color             : #fff;
  padding           : 64px 0;
  overflow          : hidden;
}

.sa-final-cta::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(110deg, rgba(2, 19, 35, 0.88) 0%, rgba(2, 19, 35, 0.5) 40%, rgba(2, 19, 35, 0) 55%, rgba(2, 19, 35, 0) 100%);
}

.sa-final-cta-inner {
  position       : relative;
  z-index        : 1;
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  gap            : clamp(36px, 4.5vw, 56px);
}

.sa-final-cta-text {
  flex      : 1;
  min-width : 0;
  text-align: left;
}

.sa-final-cta h2 {
  margin     : 0 0 14px;
  font-size  : clamp(18px, 2.1vw, 24px);
  font-weight: 700;
}

.sa-final-cta p {
  margin       : 0 0 30px;
  font-size    : clamp(13px, 1.2vw, 15px);
  color        : rgba(255, 255, 255, 0.82);
  line-height  : 1.9;
}

.sa-final-cta .sa-hero-ctas {
  justify-content: flex-start;
}

.sa-final-cta-logo {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : clamp(140px, 14vw, 190px);
  aspect-ratio   : 1 / 1;
  background     : #fff;
  border-radius  : 16px;
  padding        : 16px;
  box-shadow     : 0 8px 24px rgba(0, 0, 0, 0.25);
}

.sa-final-cta-logo img {
  display: block;
  width  : 100%;
  height : auto;
}

.sa-contact-form {
  min-height       : 120px;
  scroll-margin-top: 110px;
}

/* =============================================
   レスポンシブ
   ============================================= */
@media screen and (max-width: 979px) {
  .sa-action-grid,
  .sa-plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sa-plan-banners {
    grid-template-columns: 1fr;
  }

  .sa-plan-banner--wide {
    grid-column: auto;
  }

  .sa-final-cta-inner {
    flex-direction: column;
  }

  .sa-final-cta-text {
    text-align: center;
  }

  .sa-final-cta .sa-hero-ctas {
    justify-content: center;
  }
}

@media screen and (max-width: 679px) {
  .sa-section {
    padding: 48px 0;
  }

  .sa-precedent {
    flex-direction: column-reverse;
  }

  .sa-precedent-visual {
    width       : 100%;
    aspect-ratio: 600 / 420;
  }

  .sa-action-grid,
  .sa-plan-grid {
    grid-template-columns: 1fr;
  }

  .sa-star-ladder {
    flex-direction: column;
    gap: 24px;
  }

  .sa-star-axis {
    display: none;
  }

  .sa-star-row-group {
    flex-direction: column;
    align-items   : stretch;
    gap           : 8px;
  }

  .sa-star-tag {
    width      : auto;
    clip-path  : none;
    border-radius: 4px;
    text-align : left;
  }

  .sa-star-row {
    grid-template-columns: 60px 1fr;
    padding: 14px 16px;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .sa-star-badge {
    position : static;
    transform: none;
    display  : inline-block;
    margin-top: 8px;
  }

  .sa-consult-card {
    flex-direction: column;
    padding       : 26px 24px;
  }

  .sa-consult-arrow {
    transform: rotate(90deg);
  }

  .sa-campaign {
    padding: 36px 20px;
  }

  .sa-hero-ctas,
  .sa-final-cta .sa-hero-ctas {
    flex-direction: column;
    align-items   : stretch;
  }

  a.sa-cta {
    justify-content: center;
  }
}