/* =============================================
   scs.css | SCS評価制度（サプライチェーン強化に向けたセキュリティ対策評価制度）LP専用スタイル
   カラーパレット: Red #c41623 / Navy #032647（ブランド）＋ Gold #c9a227（★評価の専用アクセント）
   共通スタイルは common-design.css を参照（レイアウト機構のみ利用し、見た目は本ファイルで独自に定義）
   ============================================= */

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

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

body.page_scs #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;
}

/* ── コンテンツ幅をヒーローと同じ幅(1440px)に拡張（support-academy.htmlに合わせる） ── */
body.page_scs .oc-container {
  max-width     : 1440px;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ── アンカースクロール時のヘッダー分オフセット ── */
body.page_scs #scs-overview,
body.page_scs #scs-requirements,
body.page_scs #scs-support {
  scroll-margin-top: 110px;
}

/* ── 本ページ専用カラー変数 ── */
body.page_scs {
  --scs-gold      : #ec9932;
  --scs-gold-light: #f2d98a;
  --scs-gold-dark : #97730f;

  /* ★ラダーの高→低スケール（低いほど灰、高いほど金） */
  --scs-scale-1    : #c3ccd6;
  --scs-scale-1-rgb: 195, 204, 214;
  --scs-scale-2    : var(--oc-navy);
  --scs-scale-2-rgb: 3, 38, 71;
  --scs-scale-3    : var(--scs-gold-dark);
  --scs-scale-3-rgb: 151, 115, 15;
  --scs-scale-4    : var(--scs-gold);
  --scs-scale-4-rgb: 236, 153, 50;

  /* 7つの分類（統治/取引先管理/特定/防御/検知/対応/復旧）の専用カラー：虹色（赤〜紫）を落ち着いたトーンで分散（★のゴールドとは彩度・明度を変えて区別） */
  --scs-cat-gov         : #b25444;
  --scs-cat-gov-rgb     : 178, 84, 68;
  --scs-cat-vendor      : #c07830;
  --scs-cat-vendor-rgb  : 192, 120, 48;
  --scs-cat-identify    : #a68a2e;
  --scs-cat-identify-rgb: 166, 138, 46;
  --scs-cat-protect     : #3f7a4f;
  --scs-cat-protect-rgb : 63, 122, 79;
  --scs-cat-detect      : #3f6fa0;
  --scs-cat-detect-rgb  : 63, 111, 160;
  --scs-cat-respond     : #4a4a96;
  --scs-cat-respond-rgb : 74, 74, 150;
  --scs-cat-recover     : #7a4f8a;
  --scs-cat-recover-rgb : 122, 79, 138;
}

/* =============================================
   ヒーロー（背景画像はHTML側でstyle属性指定／これはフォールバック色）
   高さは common-design.css のclamp規定に従う（下記コメント参照）
   ============================================= */
body.page_scs .page-header.oc-hero {
  background: var(--oc-navy);
}

/* 左端がわずかに明るくなる控えめなグラデーション（文字の可読性を落とさない程度） */
body.page_scs .oc-hero::before {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%);
}

/* 背景画像の左側（テキストが乗る部分）が紺系になったため、文字色を白系に統一 */
body.page_scs .page-header.oc-hero .page-header__title {
  color    : #fff;
  font-size: clamp(32px, 4.3vw, 58px);
}

.scs-hero-kicker {
  display       : block;
  margin-bottom : 24px;
  font-size     : clamp(16px, 1.6vw, 18px);
  font-weight   : 700;
  letter-spacing: 0.06em;
  color         : var(--scs-gold);
}

.scs-hero-tag {
  display       : inline-block;
  margin-bottom : 18px;
  padding       : 6px 18px;
  background    : var(--scs-gold);
  color         : #fff;
  font-size     : 12.5px;
  font-weight   : 700;
  letter-spacing: 0.04em;
  border-radius : 999px;
}

/* サプライチェーン強化に向けた…とSCS評価制度の横幅を揃える（ルビ風）
   同じ table のカラムに配置し、幅を「SCS評価制度」側に合わせて自動で揃える */
.scs-hero-title-block {
  display      : table;
  margin-bottom: 24px;
}

.scs-hero-official {
  display: table-row;
  margin : 0;
}

.scs-hero-official-cell {
  display    : table-cell;
  padding-bottom: 4px;
  white-space: nowrap;
  text-align : justify;
  text-justify: inter-character;
  color      : #cfd8e3;
  font-size  : clamp(12px, 1.1vw, 14px);
}

.scs-hero-title-row {
  display: table-row;
}

.scs-hero-title-main {
  display    : table-cell;
  white-space: nowrap;
}

.scs-hero-title-suffix {
  display     : table-cell;
  white-space : nowrap;
  padding-left: 6px;
  font-size   : clamp(18px, 2vw, 24px);
  font-weight : 500;
  vertical-align: baseline;
}

.scs-hero-lead {
  max-width  : 620px;
  margin     : 16px 0 24px;
  color      : #fff;
  font-size  : clamp(14px, 1.3vw, 16px);
  line-height: 1.9;
}

.scs-hero-ctas {
  display  : flex;
  flex-wrap: wrap;
  gap      : 16px;
}

.scs-hero-ctas a.oc-hero-cta {
  margin-top: 24px;
}

a.oc-hero-cta.oc-hero-cta--outline {
  background-color: transparent;
  color           : #fff !important;
  border-color    : #fff;
}

a.oc-hero-cta.oc-hero-cta--outline:hover,
a.oc-hero-cta.oc-hero-cta--outline:focus-visible {
  background-color: #fff;
  color           : var(--oc-navy) !important;
  border-color    : #fff;
}

/* =============================================
   共通セクション（このページ専用にゴールドの上部ラインで統一）
   ============================================= */
body.page_scs .oc-section-heading {
  border-top: none;
}

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

.scs-section {
  padding: 80px 0;
}

body.page_scs .oc-section-heading + .scs-section {
  padding-top: 12px;
}

.scs-bg-alt {
  background: var(--oc-light);
}

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

.scs-lead-highlight {
  color      : var(--oc-red);
  font-weight: 700;
}

.scs-subheading {
  margin: 64px 0 20px;
}

.scs-subheading h3 {
  display     : flex;
  align-items : center;
  gap         : 10px;
  margin      : 0;
  font-size   : clamp(16px, 1.7vw, 19px);
  font-weight : 700;
  color       : var(--oc-navy);
  padding-left: 14px;
  border-left : 4px solid var(--oc-red);
}

.scs-note {
  font-size  : 12px;
  line-height: 1.85;
  color      : #777;
  margin     : 20px 0 0;
}

.scs-note-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 3px;
  color          : var(--oc-navy);
  font-weight    : 700;
  text-decoration: none !important;
}

.scs-note-link::after {
  content  : '↗';
  font-size: 11px;
}

.scs-note-link:hover,
.scs-note-link:focus-visible {
  color: var(--oc-red);
}

/* =============================================
   ① SCS評価制度とは：★ラダー
   ============================================= */
.scs-ladder {
  background: #fff;
  border    : 1px solid var(--oc-border);
  padding   : clamp(24px, 4vw, 40px);
  margin-bottom: 24px;
}

.scs-ladder-inner {
  display: flex;
  gap    : clamp(16px, 3vw, 28px);
}

.scs-ladder-axis {
  flex-shrink   : 0;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
  padding       : 4px 0;
}

.scs-ladder-axis-dot {
  font-size  : 11px;
  font-weight: 700;
  color      : #8a94a0;
}

.scs-ladder-axis-bar {
  flex         : 1;
  width        : 3px;
  border-radius: 3px;
  background   : linear-gradient(to bottom, var(--scs-gold), var(--oc-navy), var(--scs-scale-1));
}

.scs-ladder-rows {
  flex          : 1;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.scs-ladder-row {
  position     : relative;
  display      : flex;
  align-items  : center;
  gap          : clamp(14px, 2.5vw, 24px);
  padding      : 16px clamp(16px, 2.5vw, 24px);
  border-radius: 10px;
  background   : rgba(var(--row-rgb), 0.08);
  border       : 1px solid rgba(var(--row-rgb), 0.35);
}

.scs-ladder-row--5   { --row-rgb: var(--scs-scale-4-rgb); }
.scs-ladder-row--4   { --row-rgb: var(--scs-scale-3-rgb); }
.scs-ladder-row--3   { --row-rgb: var(--scs-scale-2-rgb); }
.scs-ladder-row--12  { --row-rgb: var(--scs-scale-1-rgb); }

.scs-ladder-level {
  flex-shrink: 0;
  width      : 52px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size  : clamp(15px, 1.5vw, 18px);
  color      : rgb(var(--row-rgb));
  text-align : center;
}

.scs-ladder-stars {
  display       : inline-block;
  flex-shrink   : 0;
  width         : clamp(90px, 9vw, 120px);
  font-size     : clamp(14px, 1.6vw, 19px);
  letter-spacing: 1px;
  color         : rgb(var(--row-rgb));
}

/* ★1〜2はSECURITY ACTION（既存の自己宣言制度）の表記に置き換えるため専用調整 */
.scs-ladder-row--12 .scs-ladder-stars {
  width         : auto;
  font-size     : clamp(11px, 1.1vw, 13px);
  font-weight   : 700;
  letter-spacing: 0.3px;
  white-space   : nowrap;
}

.scs-ladder-body {
  flex     : 1;
  min-width: 0;
}

.scs-ladder-desc {
  margin     : 0 0 6px;
  font-size  : 13px;
  line-height: 1.7;
  color      : var(--oc-text);
}

.scs-ladder-method {
  display      : inline-block;
  padding      : 2px 12px;
  background   : #fff;
  border       : 1px solid var(--oc-border);
  border-radius: 999px;
  font-size    : 11px;
  font-weight  : 700;
  color        : #667;
}

.scs-ladder-badge {
  position     : absolute;
  top          : -10px;
  right        : 16px;
  padding      : 3px 12px;
  background   : var(--oc-navy);
  color        : #fff;
  font-size    : 10.5px;
  font-weight  : 700;
  border-radius: 999px;
}

/* =============================================
   ② SCS評価制度で本当に求められること
   ============================================= */
.scs-req-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 18px;
  margin-bottom        : 8px;
}

.scs-req-card--gov      { --scs-cat: var(--scs-cat-gov);      --scs-cat-rgb: var(--scs-cat-gov-rgb); }
.scs-req-card--vendor   { --scs-cat: var(--scs-cat-vendor);   --scs-cat-rgb: var(--scs-cat-vendor-rgb); }
.scs-req-card--identify { --scs-cat: var(--scs-cat-identify); --scs-cat-rgb: var(--scs-cat-identify-rgb); }
.scs-req-card--protect  { --scs-cat: var(--scs-cat-protect);  --scs-cat-rgb: var(--scs-cat-protect-rgb); }
.scs-req-card--detect   { --scs-cat: var(--scs-cat-detect);   --scs-cat-rgb: var(--scs-cat-detect-rgb); }
.scs-req-card--respond  { --scs-cat: var(--scs-cat-respond);  --scs-cat-rgb: var(--scs-cat-respond-rgb); }
.scs-req-card--recover  { --scs-cat: var(--scs-cat-recover);  --scs-cat-rgb: var(--scs-cat-recover-rgb); }

.scs-req-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 8px;
  margin-bottom  : 14px;
}

.scs-req-tag {
  display      : inline-flex;
  align-items  : center;
  padding      : 5px 14px;
  background   : rgba(var(--scs-cat-rgb), 0.12);
  border-radius: 999px;
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--scs-cat, var(--oc-navy));
}

.scs-req-card {
  background : #fff;
  border     : 1px solid var(--oc-border);
  border-top : 3px solid var(--scs-cat, var(--oc-navy));
  padding    : 22px 18px;
}

.scs-req-icon {
  display    : flex;
  flex-shrink: 0;
  width      : 32px;
  height     : 32px;
  color      : var(--scs-cat, var(--oc-navy));
}

.scs-req-icon svg {
  width : 100%;
  height: 100%;
}

.scs-req-label {
  display      : block;
  margin-bottom: 8px;
  font-size    : 16px;
  font-weight  : 700;
  color        : var(--oc-navy);
}

.scs-req-card p {
  margin     : 0;
  font-size  : 12px;
  line-height: 1.75;
  color      : #555;
}

/* 評価対象（対象／対象外）：短いチップ形式で構成し、文章量を抑える */
.scs-scope-compare {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : 20px;
}

.scs-scope-col {
  background: #fff;
  border    : 1px solid var(--oc-border);
  padding   : 22px 22px 20px;
}

.scs-scope-col--in  { border-top: 3px solid var(--oc-navy); }
.scs-scope-col--out { border-top: 3px solid #9aa3ad; }

.scs-scope-col-title {
  display    : flex;
  align-items: center;
  gap        : 8px;
  margin     : 0 0 14px;
  font-size  : 18px;
  font-weight: 700;
  color      : var(--oc-navy);
}

.scs-scope-col--out .scs-scope-col-title {
  color: #5a636d;
}

.scs-scope-col-mark {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 22px;
  height         : 22px;
  border-radius  : 50%;
  background     : var(--oc-navy);
  color          : #fff;
  font-size      : 11px;
  font-weight    : 700;
}

.scs-scope-col--out .scs-scope-col-mark {
  background: #9aa3ad;
}

.scs-scope-chips {
  display   : flex;
  flex-wrap : wrap;
  gap       : 8px;
  list-style: none;
  margin    : 0;
  padding   : 0;
}

.scs-scope-chips li {
  padding      : 7px 14px;
  background   : var(--oc-light);
  border-radius: 999px;
  font-size    : 12.5px;
  font-weight  : 700;
  color        : var(--oc-navy);
}

.scs-scope-col--out .scs-scope-chips li {
  color: #5a636d;
}

.scs-scope-caveat-img {
  display      : block;
  width        : 100%;
  height       : auto;
  margin-top   : 16px;
  border-radius: 6px;
}

.scs-scope-caveat {
  position    : relative;
  margin-top  : 14px;
  padding-top : 12px;
  padding-left: 24px;
  border-top  : 1px dashed var(--oc-red);
  font-size   : 13px;
  font-weight : 700;
  line-height : 1.7;
  color       : var(--oc-red);
}

.scs-scope-caveat::before {
  content        : 'i';
  position       : absolute;
  left           : 0;
  top            : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 15px;
  height         : 15px;
  border-radius  : 50%;
  background     : var(--oc-red);
  color          : #fff;
  font-size      : 9px;
  font-style     : italic;
  font-family    : Georgia, 'Times New Roman', serif;
}

.scs-tip-box {
  display    : flex;
  gap        : 14px;
  align-items: flex-start;
  margin-top : 24px;
  padding    : 20px 24px;
  background : #fff;
  border     : 1px solid var(--oc-border);
  border-left: 4px solid #ec9932;
}

.scs-tip-icon {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  background     : #ec9932;
  color          : #fff;
  font-size      : 13px;
  font-weight    : 700;
}

.scs-tip-box p {
  margin     : 0;
  font-size  : 12.5px;
  line-height: 1.85;
  color      : var(--oc-text);
}

/* =============================================
   ③ SOMPO CYBER SECURITYが支援する内容（全幅の行カード形式）
   ============================================= */
.scs-cat-list {
  display      : flex;
  flex-direction: column;
  gap          : 14px;
  margin-bottom: 28px;
}

.scs-cat-row {
  display              : grid;
  grid-template-columns: 260px 1fr;
  background           : #fff;
  border               : 1px solid var(--oc-border);
  border-left          : 4px solid var(--scs-cat, var(--oc-navy));
  overflow             : hidden;
}

.scs-cat-row--gov      { --scs-cat: var(--scs-cat-gov);      --scs-cat-rgb: var(--scs-cat-gov-rgb); }
.scs-cat-row--vendor   { --scs-cat: var(--scs-cat-vendor);   --scs-cat-rgb: var(--scs-cat-vendor-rgb); }
.scs-cat-row--identify { --scs-cat: var(--scs-cat-identify); --scs-cat-rgb: var(--scs-cat-identify-rgb); }
.scs-cat-row--protect  { --scs-cat: var(--scs-cat-protect);  --scs-cat-rgb: var(--scs-cat-protect-rgb); }
.scs-cat-row--detect    { --scs-cat: var(--scs-cat-detect);    --scs-cat-rgb: var(--scs-cat-detect-rgb); }
.scs-cat-row--respond   { --scs-cat: var(--scs-cat-respond);   --scs-cat-rgb: var(--scs-cat-respond-rgb); }
.scs-cat-row--recover   { --scs-cat: var(--scs-cat-recover);   --scs-cat-rgb: var(--scs-cat-recover-rgb); }

.scs-cat-row-label {
  display      : block;
  padding      : 20px 18px;
  background   : rgba(var(--scs-cat-rgb), 0.07);
  border-right : 1px solid var(--oc-border);
}

.scs-cat-row-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 6px;
  margin-bottom  : 8px;
}

.scs-cat-row-tag {
  display      : inline-flex;
  align-items  : center;
  padding      : 3px 10px;
  background   : rgba(var(--scs-cat-rgb), 0.15);
  border-radius: 999px;
  font-size    : 10px;
  font-weight  : 700;
  color        : var(--scs-cat, var(--oc-navy));
}

.scs-cat-icon {
  display    : flex;
  flex-shrink: 0;
  width      : 24px;
  height     : 24px;
  color      : var(--scs-cat, var(--oc-navy));
}

.scs-cat-icon svg {
  width : 100%;
  height: 100%;
}

.scs-cat-row-title {
  display      : block;
  margin-bottom: 4px;
  font-size    : 14.5px;
  font-weight  : 700;
  color        : var(--scs-cat, var(--oc-navy));
}

.scs-cat-row-desc {
  display    : block;
  font-size  : 11.5px;
  line-height: 1.6;
  color      : #667;
}

.scs-cat-row-services {
  display       : flex;
  flex-direction: column;
  justify-content: center;
  gap           : 10px;
  padding       : 20px 24px;
}

.scs-cat-svc {
  font-size  : 13px;
  line-height: 1.85;
  color      : #555;
}

.scs-cat-svc-label {
  font-weight: 700;
  color      : var(--oc-navy);
  margin-right: 4px;
}

.scs-cat-svc a {
  display        : inline-block;
  margin         : 2px 3px 2px 0;
  padding        : 4px 14px;
  background     : rgba(var(--scs-cat-rgb), 0.1);
  border         : 1px solid rgba(var(--scs-cat-rgb), 0.4);
  border-radius  : 999px;
  color          : var(--scs-cat, var(--oc-navy));
  font-weight    : 700;
  font-size      : 12.5px;
  line-height    : 1.6;
  text-decoration: none !important;
  transition     : background-color 0.2s var(--oc-ease);
}

.scs-cat-svc a:hover,
.scs-cat-svc a:focus-visible {
  background: rgba(var(--scs-cat-rgb), 0.24);
}

/* =============================================
   ガイドライン対応サポートアカデミー（横断パッケージ）
   ============================================= */
.scs-academy-callout {
  position       : relative;
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  gap            : 24px;
  background     : url('/dcms_media/image/support-academy-hero.jpg') no-repeat center / cover;
  border         : none;
  border-left    : 4px solid var(--scs-gold);
  padding        : 36px clamp(24px, 4vw, 44px);
  text-align     : left;
}

.scs-academy-callout-text {
  min-width: 0;
  max-width: 640px;
}

.scs-academy-ribbon {
  display      : inline-block;
  margin-bottom: 14px;
  padding      : 4px 14px;
  background   : var(--scs-gold);
  color        : var(--oc-navy);
  font-size    : 11px;
  font-weight  : 700;
  border-radius: 999px;
}

.scs-academy-callout-text h3 {
  margin     : 0 0 10px;
  font-size  : clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color      : #fff;
}

.scs-academy-callout-text p {
  margin     : 0;
  font-size  : 13.5px;
  line-height: 1.85;
  color      : #dfe4ea;
}

.scs-academy-btn {
  display        : flex;
  align-self      : center;
  flex-shrink    : 0;
  align-items    : center;
  justify-content: center;
  padding        : 14px 26px;
  background     : #fff;
  color          : var(--oc-navy) !important;
  font-size      : clamp(13px, 1.05vw, 14px);
  font-weight    : 700;
  white-space    : nowrap;
  text-decoration: none !important;
  transition     : background-color 0.25s var(--oc-ease);
}

.scs-academy-btn:hover,
.scs-academy-btn:focus-visible {
  background-color: var(--scs-gold-light);
}

/* =============================================
   ④ 最終CTA
   ============================================= */
.scs-final-cta {
  width        : 100vw;
  margin-inline: calc(50% - 50vw);
  padding      : clamp(56px, 8vw, 88px) 0;
  background   : var(--oc-navy);
  border-top   : 4px solid var(--scs-gold);
  text-align   : center;
}

.scs-final-cta-inner h2 {
  margin     : 0 0 16px;
  font-size  : clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color      : #fff;
}

.scs-final-cta-inner p {
  margin     : 0;
  font-size  : clamp(13px, 1.2vw, 15px);
  line-height: 1.9;
  color      : #dfe4ea;
}

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

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

  .scs-cat-row {
    grid-template-columns: 200px 1fr;
  }

  .scs-scope-compare {
    grid-template-columns: 1fr;
  }
}

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

  /* 狭い画面では横幅を揃える表(table)組みをやめ、通常の折り返しに戻す */
  .scs-hero-title-block,
  .scs-hero-official,
  .scs-hero-official-cell,
  .scs-hero-title-row,
  .scs-hero-title-main {
    display: block;
  }

  .scs-hero-official-cell {
    white-space: normal;
    text-align : center;
  }

  .scs-hero-title-suffix {
    display    : inline;
    padding-left: 0;
  }

  .scs-req-grid {
    grid-template-columns: 1fr;
  }

  .scs-cat-row {
    grid-template-columns: 1fr;
  }

  .scs-cat-row-label {
    border-right: none;
    border-bottom: 1px solid var(--oc-border);
  }

  .scs-ladder-inner {
    gap: 12px;
  }

  .scs-ladder-row {
    flex-wrap: wrap;
  }

  .scs-ladder-stars {
    width: auto;
  }

  .scs-academy-btn {
    width: 100%;
  }
}