/*
 * V9: 見た目だけを実装支援LP（csc-ai-security-implementation-web）のトンマナへ寄せる上書き。
 * 文言・構成・Claimは一切変えない。V8（design-system.v8-20260727.css）を凍結したまま、
 * すべて [data-tone-revision="v9-20260927"] でスコープした上書きのみを追加する。
 *
 * 各ルールは [data-tone-revision="v9-20260927"] を二重に重ねて特異度を確実に確保し、
 * V8側の任意のセレクタ構成（クラス数の違い等）に依存せず上書きが効くようにしている。
 */

[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] {
  --v9-blue: #006FE6;
  --v9-blue-hover: #005BBD;
  --v9-navy: #0B1F33;
  --v9-ink: #1A2433;
  --v9-pale: #F4F8FC;
  --v9-line: #D5E0EC;
  --v9-muted: #4A5A6E;
  --v9-cyan: #00AFC8;
  --v9-white: #FFFFFF;

  /* このトークン群（--v4-blue / --v4-cyan / --v4-navy / --v4-sky）は #contact・#mid-cta では
     参照されていないため、グローバルに置き換えても暗色セクションを崩さない。 */
  --v4-blue: var(--v9-blue);
  --v4-cyan: var(--v9-cyan);
  --v4-navy: var(--v9-navy);
  --v4-sky: var(--v9-pale);

  /* ボタンの主色（--v4-action）は #contact・#mid-cta を含め全箇所で青にする（実装支援LPと同じ方針）。 */
  --v4-action: var(--v9-blue);
}

/* ==================== ヘッダー ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-header {
  border-bottom: 1px solid var(--v9-line);
  background: var(--v9-white);
  box-shadow: none;
  backdrop-filter: none;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .brand__logo {
  border: 0;
  background: none;
  padding: 0;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .brand__text {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-nav a:not(.btn) {
  color: var(--v9-navy);
}
/* ヘッダーの CTA は青地なので文字を白に固定する（ナビ文字色の上書きを受けないよう明示） */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-nav a.btn,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-nav a.btn:hover {
  color: var(--v9-white);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .brand__text small {
  color: var(--v9-muted);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-nav a:not(.btn):hover {
  color: var(--v9-blue);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .mobile-nav-button {
  color: var(--v9-navy);
}
@media (max-width: 1180px) {
  [data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-nav {
    background: var(--v9-white);
    border: 1px solid var(--v9-line);
    box-shadow: 0 12px 30px rgba(11, 31, 51, .08);
  }
}
@media (prefers-reduced-transparency: reduce) {
  [data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-header,
  [data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .mobile-sticky-cta {
    background: var(--v9-white);
    backdrop-filter: none;
  }
}

/* ==================== ボタン（全箇所共通・オレンジ撤去） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .btn {
  border-radius: 6px;
  min-height: 48px;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .btn--primary {
  border-color: var(--v9-blue);
  background: var(--v9-blue);
  box-shadow: none;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .btn--primary:hover {
  border-color: var(--v9-blue-hover);
  background: var(--v9-blue-hover);
  box-shadow: 0 12px 30px rgba(0, 111, 230, .22);
}
/* FVの.btn--primaryはV8でハードコード（#c54800）されているため個別に上書きする */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 .btn--primary {
  border-color: var(--v9-blue);
  background: var(--v9-blue);
  box-shadow: none;
}

/* ==================== ファーストビュー（FV） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 {
  background:
    linear-gradient(to left, #D6E8FB 0%, rgba(214, 232, 251, .55) 30%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--v9-white) 0%, var(--v9-pale) 100%);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v4-option1-hero__panel,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v4-option1-hero__copy {
  background: transparent;
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 .product-kicker {
  width: fit-content;
  padding: 4px 12px;
  border: 1px solid var(--v9-line);
  border-left: 1px solid var(--v9-line);
  border-radius: 999px;
  background: var(--v9-white);
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 h1 {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 h1 em {
  color: var(--v9-blue);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .product-hero--option1 .product-hero__lead,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v8-hero-summary {
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v4-option1-hero__bottom {
  border-top: 1px solid var(--v9-line);
}

/* 実績2枠（v6-hero-proofs）: 白地・罫線・角丸8px */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v6-hero-proofs > div {
  border: 1px solid var(--v9-line);
  border-radius: 8px;
  background: var(--v9-white);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v6-hero-proofs strong {
  color: var(--v9-blue);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v6-hero-proofs span {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v6-hero-proofs > i {
  color: var(--v9-blue);
}

/* KV: 灰色パネルを消して背景へなじませる（全ブレークポイント共通で透過に統一） */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v4-option1-hero__visual {
  background: transparent;
}
/* 画像自体の淡い灰色の地が四角く浮くため、四辺を透明へぼかして FV のグラデーションへつなげる */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .v4-option1-hero__visual .product-hero__media {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* ==================== セクション共通見出し（#scope・#features・#after-support のみ暗色→白系へ） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope.section-tone--dark {
  background: linear-gradient(180deg, var(--v9-white) 0%, var(--v9-pale) 100%);
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features.section-tone--dark {
  background: var(--v9-pale);
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #after-support.section-tone--dark {
  background: var(--v9-white);
  color: var(--v9-ink);
}
/* WCAG AA（4.5:1）に余裕を持たせるため、14px太字のeyebrowは--v9-blueよりやや濃いhover色を使う */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .eyebrow,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .eyebrow,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #after-support .eyebrow {
  color: var(--v9-blue-hover);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .eyebrow::before,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .eyebrow::before,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #after-support .eyebrow::before {
  background: var(--v9-blue-hover);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .section-title,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .section-title,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #after-support .section-title {
  color: var(--v9-navy);
}

/* ==================== #scope（診断範囲） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .v6-scope-copy p {
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .v6-scope-heading,
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .v6-scope-area-heading {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .service-boundary {
  border: 1px solid var(--v9-line);
  border-left: 4px solid var(--v9-blue);
  background: var(--v9-white);
  color: var(--v9-muted);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope .v6-scope-area-grid article {
  border-top-color: var(--v9-blue);
}
/* architecture-map（構成図）は自己完結した濃色パネルとして残す（下記報告参照）。文字色のみ維持でよいため変更しない。 */

/* ==================== #features（本サービスの特長） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v8-features-intro {
  color: var(--v9-ink);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .service-feature-grid article {
  border: 1px solid var(--v9-line);
  border-top: 4px solid var(--v9-blue);
  background: var(--v9-white);
  color: var(--v9-ink);
  box-shadow: none;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .service-feature-grid article > span {
  color: var(--v9-blue);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .service-feature-grid article h3 {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .service-feature-grid article p {
  color: var(--v9-muted);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-feature-proof {
  border-top-color: var(--v9-line);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-feature-proof h3 {
  color: var(--v9-navy);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-feature-proof p {
  color: var(--v9-ink);
}
/* v6-competition-panel は自己完結した濃色パネルとして残す（下記報告参照）。
   ただし内部の<p>（.v6-competition-panel__body > p）は元々colorが未指定で、
   セクション本文色（旧: 常時ライト系トークン）を継承する設計だった。
   #featuresのセクション本文色をダークインクへ変えたことで継承元が変わり、
   濃色パネル上で読めなくなるため、パネル単位で明色を再指定する。 */
/* #features .v6-feature-proof p { color: var(--v9-ink) } がID込みの詳細度を持ち、
   .v6-competition-panel の内部にも及んでしまうため、ここでは #features を含めて上書きする。 */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-competition-panel {
  color: var(--v9-white);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-competition-panel__body > p {
  color: #d3dfec;
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #features .v6-competition-achievement p {
  color: rgba(255, 255, 255, .72);
}

/* ==================== #after-support（診断後の支援） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #after-support .v6-after-support-copy p {
  color: var(--v9-ink);
}
/* support-journey は自己完結した濃色パネルとして残す（下記報告参照）。オレンジのdividerのみ撤去する。 */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .support-journey__divider {
  border-color: var(--v9-blue);
  color: var(--v9-cyan);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .support-journey__divider strong {
  color: var(--v9-cyan);
}

/* ==================== 診断項目の凡例（オレンジ撤去） ==================== */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .diagnostic-matrix .is-interface {
  color: var(--v9-cyan);
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .diagnostic-matrix tbody .is-interface {
  color: var(--v9-cyan);
}

/* ==================== モバイル固定CTA・フッター ==================== */
@media (max-width: 720px) {
  [data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .mobile-sticky-cta {
    border-top: 1px solid var(--v9-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
  }
}
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] .site-footer {
  border-top: 1px solid var(--v9-line);
  background: var(--v9-white);
  color: var(--v9-muted);
}

/* 構成図の周辺領域への矢印は V3 のオレンジ（--product-orange）を継いでいたため、周辺領域の点線枠と同じ灰青へ揃える */
[data-tone-revision="v9-20260927"][data-tone-revision="v9-20260927"] #scope i.is-contextual {
  color: #8fa6bf;
}
