@charset "utf-8";
/*
 * site-high-contrast.css
 * ハイコントラストモード対応 — Windows 高コントラスト / forced-colors 対応
 * 読み込み順: site.css の後に <link> で追加、または @import で末尾に連結
 *
 * forced-colors: active（Windowsハイコントラスト等）ではブラウザが
 * CSSカスタムプロパティを含む多くの色指定を上書きしてしまうため、
 * システムキーワードで明示指定し直すことで視認性・操作性を確保する。
 *
 * 使用するシステムキーワード:
 *   Canvas        … ページ背景色
 *   CanvasText    … 通常テキスト色
 *   ButtonFace    … ボタン背景色
 *   ButtonText    … ボタンテキスト色
 *   Highlight     … 選択・フォーカス強調色
 *   HighlightText … 強調上のテキスト色
 *   LinkText      … リンク色
 *   GrayText      … 無効テキスト色
 *   Mark          … マーク/ハイライト背景
 *   MarkText      … マーク上のテキスト
 *
 */

@media (forced-colors: active) {

  /* =====================================================
   * :root — システムキーワードへの差し替え
   * forced-colors 環境では CSS 変数も上書きされる場合があるため
   * コンポーネントレベルで直接指定することを優先する
   * ===================================================== */
  :root {
    --brand-color:      Highlight;
    --bs-body-color:    CanvasText;
    --bs-link-color:    LinkText;
    --bs-link-hover-color: LinkText;
    --text-secondary:   CanvasText;
    --bg-secondary:     Canvas;
    --border-secondary: CanvasText;
    --ns-color-line:    CanvasText;
    --ns-color-heading: CanvasText;
    --ns-color-muted:   GrayText;
  }

  /* =====================================================
   * body / 全体
   * ===================================================== */
  body {
    background-color: Canvas;
    color: CanvasText;
  }

  /* =====================================================
   * リンク全般
   * ===================================================== */
  a {
    color: LinkText;
    forced-color-adjust: auto;
  }
  a:hover,
  a:focus-visible {
    color: LinkText;
  }

  /* =====================================================
   * フォーカスリング: システムの Highlight を明示使用
   * ===================================================== */
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }

  /* =====================================================
   * ボタン系（CTA / gnav__contact / sp-nav__contact）
   * ===================================================== */
  .site-footer__cta,
  .gnav__contact,
  .sp-nav__contact {
    background-color: ButtonFace;
    border: 2px solid ButtonText;
    color: ButtonText;
    forced-color-adjust: none;
  }
  .site-footer__cta:hover,
  .site-footer__cta:focus-visible,
  .gnav__contact:hover,
  .gnav__contact:focus-visible,
  .sp-nav__contact:hover,
  .sp-nav__contact:focus-visible {
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }

  /* =====================================================
   * site-header
   * ===================================================== */
  .site-header,
  #top.site-header {
    background-color: Canvas;
    border-bottom: 2px solid CanvasText;
  }

  /* =====================================================
   * gnav (グローバルナビ)
   * ===================================================== */
  .gnav__link,
  .gnav__btn {
    color: CanvasText;
    background-color: Canvas;
    border: 1px solid transparent;
  }
  .gnav__link:hover,
  .gnav__btn:hover,
  .gnav__link:focus-visible,
  .gnav__btn:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }
  .gnav__icon {
    color: CanvasText;
  }
  .gnav__link:hover .gnav__icon,
  .gnav__btn:hover .gnav__icon,
  .gnav__link:focus-visible .gnav__icon,
  .gnav__btn:focus-visible .gnav__icon {
    color: HighlightText;
  }

  /* =====================================================
   * mega-menu
   * ===================================================== */
  .mega-menu,
  .lang-menu {
    background-color: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  .mega-menu__category,
  .mega-menu__sublink {
    color: LinkText;
    border-bottom-color: CanvasText;
  }
  .mega-menu__category:hover,
  .mega-menu__category:focus-visible,
  .mega-menu__sublink:hover,
  .mega-menu__sublink:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }
  .mega-menu__subtitle {
    color: CanvasText;
  }

  /* =====================================================
   * link01〜link10 系
   * ===================================================== */
  .link01, .link02, .link03, .link04,
  .link05, .link07, .link08,
  .link1_item, .link5_link, .link2_link,
  .link9_item {
    color: LinkText;
    border-color: CanvasText;
    background-color: Canvas;
  }
  .link01:hover, .link02:hover, .link03:hover, .link04:hover,
  .link05:hover, .link07:hover, .link08:hover,
  .link1_item:hover, .link5_link:hover, .link2_link:hover,
  .link01:focus-visible, .link02:focus-visible, .link03:focus-visible, .link04:focus-visible,
  .link05:focus-visible, .link07:focus-visible, .link08:focus-visible,
  .link1_item:focus-visible, .link5_link:focus-visible, .link2_link:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    border-color: Highlight;
    forced-color-adjust: none; /* 子要素への Canvas 強制を防ぎ、黒背景が出ないようにする */
  }

  /* link08 SVGアイコン（内部ナビゲーション等）*/
  .link08__icon-circle {
    fill: transparent;
    stroke: CanvasText;
    forced-color-adjust: none;
  }
  .link08__icon-arrow {
    stroke: CanvasText;
    forced-color-adjust: none;
  }
  .link08:hover .link08__icon-circle,
  .link08:focus-visible .link08__icon-circle {
    fill: transparent;
    stroke: Canvas;
    forced-color-adjust: none;
  }
  .link08:hover .link08__icon-arrow,
  .link08:focus-visible .link08__icon-arrow {
    stroke: Canvas;
    forced-color-adjust: none;
  }

  /* link06 */
  .link06 {
    background-color: Canvas;
    border-bottom-color: CanvasText;
    color: CanvasText;
  }
  /* link06 SVGアイコン: 通常状態 */
  .link06__icon-circle {
    fill: transparent;
    stroke: CanvasText;
    forced-color-adjust: none;
  }
  .link06__icon-arrow {
    stroke: CanvasText;
    forced-color-adjust: none;
  }
  .link06:hover,
  .link06:focus-visible {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  /* link06__label: hover/focus時に HighlightText へ上書き */
  .link06:hover .link06__label,
  .link06:focus-visible .link06__label {
    color: HighlightText;
  }
  /* link06 SVGアイコン: hover/focus時（黒円・白矢印） */
  .link06:hover .link06__icon-circle,
  .link06:focus-visible .link06__icon-circle {
    fill: transparent;
    stroke: Canvas;
    forced-color-adjust: none;
  }
  .link06:hover .link06__icon-arrow,
  .link06:focus-visible .link06__icon-arrow {
    stroke: Canvas;
    forced-color-adjust: none;
  }

  /* link10 (アウトラインボタン型) */
  .link10 {
    border: 2px solid ButtonText;
    color: ButtonText;
    background-color: ButtonFace;
    forced-color-adjust: none;
  }
  .link10:hover,
  .link10:focus-visible {
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
    forced-color-adjust: none;
  }

  /* link9_item ホバー */
  .link9_item:hover,
  .link9_item:focus-visible {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .link9_date,
  .link9_new {
    color: CanvasText;
  }
  /* お知らせタイトルは白（CanvasText）、hover時は HighlightText */
  .link9_title {
    color: CanvasText;
  }
  .link9_item:hover .link9_title,
  .link9_item:focus-visible .link9_title {
    color: HighlightText;
  }
  /* 日付も hover 時に Canvas（黒）で表示 */
  .link9_item:hover .link9_date,
  .link9_item:focus-visible .link9_date {
    color: Canvas;
  }

  /* link1_num（01/02 番号）: hover時 HighlightText で視認性確保 */
  .link1_num {
    color: CanvasText;
  }
  .link1_item:hover .link1_num,
  .link1_item:focus-visible .link1_num {
    color: HighlightText;
  }

  /* =====================================================
   * arrow-right-icon SVG: 通常状態
   * 円は塗りなし・黒枠線のみ、矢印線も黒で表示
   * ===================================================== */
  .arrow-right-icon-circle {
    fill: transparent;
    stroke: CanvasText;
    forced-color-adjust: none;
  }
  .arrow-right-icon-arrow {
    stroke: CanvasText;
    forced-color-adjust: none;
  }

  /* =====================================================
   * arrow-right-icon SVG: ホバー/フォーカス時
   * 円は引き続き非表示、矢印線は Canvas（黒）で表示
   * ※ 親に forced-color-adjust: none があるため明示指定が必要
   * ===================================================== */
  .link01:hover .arrow-right-icon-circle,
  .link02:hover .arrow-right-icon-circle,
  .link03:hover .arrow-right-icon-circle,
  .link04:hover .arrow-right-icon-circle,
  .link05:hover .arrow-right-icon-circle,
  .link07:hover .arrow-right-icon-circle,
  .link08:hover .arrow-right-icon-circle,
  .link1_item:hover .arrow-right-icon-circle,
  .link5_link:hover .arrow-right-icon-circle,
  .link2_link:hover .arrow-right-icon-circle,
  .link9_item:hover .arrow-right-icon-circle,
  .mega-menu__category:hover .arrow-right-icon-circle,
  .mega-menu__sublink:hover .arrow-right-icon-circle,
  .sp-nav__cat:hover .arrow-right-icon-circle,
  .sp-nav__sub:hover .arrow-right-icon-circle,
  .gnav__link:hover .arrow-right-icon-circle,
  .gnav__btn:hover .arrow-right-icon-circle,
  .link01:focus-visible .arrow-right-icon-circle,
  .link02:focus-visible .arrow-right-icon-circle,
  .link03:focus-visible .arrow-right-icon-circle,
  .link04:focus-visible .arrow-right-icon-circle,
  .link05:focus-visible .arrow-right-icon-circle,
  .link07:focus-visible .arrow-right-icon-circle,
  .link08:focus-visible .arrow-right-icon-circle,
  .link1_item:focus-visible .arrow-right-icon-circle,
  .link5_link:focus-visible .arrow-right-icon-circle,
  .link2_link:focus-visible .arrow-right-icon-circle,
  .link9_item:focus-visible .arrow-right-icon-circle,
  .mega-menu__category:focus-visible .arrow-right-icon-circle,
  .mega-menu__sublink:focus-visible .arrow-right-icon-circle,
  .sp-nav__cat:focus-visible .arrow-right-icon-circle,
  .sp-nav__sub:focus-visible .arrow-right-icon-circle {
    fill: transparent;
    stroke: Canvas;
    forced-color-adjust: none;
  }
  .link01:hover .arrow-right-icon-arrow,
  .link02:hover .arrow-right-icon-arrow,
  .link03:hover .arrow-right-icon-arrow,
  .link04:hover .arrow-right-icon-arrow,
  .link05:hover .arrow-right-icon-arrow,
  .link07:hover .arrow-right-icon-arrow,
  .link08:hover .arrow-right-icon-arrow,
  .link1_item:hover .arrow-right-icon-arrow,
  .link5_link:hover .arrow-right-icon-arrow,
  .link2_link:hover .arrow-right-icon-arrow,
  .link9_item:hover .arrow-right-icon-arrow,
  .mega-menu__category:hover .arrow-right-icon-arrow,
  .mega-menu__sublink:hover .arrow-right-icon-arrow,
  .sp-nav__cat:hover .arrow-right-icon-arrow,
  .sp-nav__sub:hover .arrow-right-icon-arrow,
  .gnav__link:hover .arrow-right-icon-arrow,
  .gnav__btn:hover .arrow-right-icon-arrow,
  .link01:focus-visible .arrow-right-icon-arrow,
  .link02:focus-visible .arrow-right-icon-arrow,
  .link03:focus-visible .arrow-right-icon-arrow,
  .link04:focus-visible .arrow-right-icon-arrow,
  .link05:focus-visible .arrow-right-icon-arrow,
  .link07:focus-visible .arrow-right-icon-arrow,
  .link08:focus-visible .arrow-right-icon-arrow,
  .link1_item:focus-visible .arrow-right-icon-arrow,
  .link5_link:focus-visible .arrow-right-icon-arrow,
  .link2_link:focus-visible .arrow-right-icon-arrow,
  .link9_item:focus-visible .arrow-right-icon-arrow,
  .mega-menu__category:focus-visible .arrow-right-icon-arrow,
  .mega-menu__sublink:focus-visible .arrow-right-icon-arrow,
  .sp-nav__cat:focus-visible .arrow-right-icon-arrow,
  .sp-nav__sub:focus-visible .arrow-right-icon-arrow {
    stroke: Canvas;
    forced-color-adjust: none;
  }

  /* 外部リンクアイコン */
  .ext-link-icon-path {
    fill: CanvasText;
    forced-color-adjust: none;
  }
  a:hover .ext-link-icon-path,
  a:focus-visible .ext-link-icon-path {
    fill: HighlightText;
    forced-color-adjust: none;
  }

  /* =====================================================
   * h1 デコレーション線（brand-color → Highlight）
   * ===================================================== */
  h1::after {
    background-color: Highlight;
    forced-color-adjust: none;
  }

  /* h2 テキスト色 */
  h2 {
    color: CanvasText;
  }

  /* =====================================================
   * list-number: 番号ラベル
   * ===================================================== */
  .list-number > li::before {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  /* =====================================================
   * v2-topics__card: トピックスカード枠線
   * border は overflow:hidden の親に切られる場合があるため
   * outline（レイアウト外）+ outline-offset で内側に表示する
   * ===================================================== */
  .v2-topics__card {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  /* =====================================================
   * product-card-row: カード枠
   * ===================================================== */
  .product-card-row__left,
  .product-card-row__right {
    background-color: Canvas;
    border: 2px solid CanvasText;
  }

  /* =====================================================
   * service-list-item
   * ===================================================== */
  .service-list-item {
    background-color: Canvas;
    border: 2px solid CanvasText;
  }

  /* =====================================================
   * subhead-box
   * ===================================================== */
  .subhead-box {
    background-color: Canvas;
    border: 2px solid CanvasText;
    color: CanvasText;
  }

  /* =====================================================
   * page-hero リードオーバーレイ
   * ===================================================== */
  .page-hero:not(.page-hero--lead-below-sp) .page-hero__lead {
    background-color: Canvas;
    color: CanvasText;
    border: none;
    forced-color-adjust: none;
  }

  /* =====================================================
   * site-footer
   * ===================================================== */
  .site-footer__nav-link {
    color: LinkText;
  }
  .site-footer__nav-link:hover,
  .site-footer__nav-link:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    forced-color-adjust: none;
  }
  .site-footer__sns-link {
    color: LinkText;
  }
  .site-footer__copyright-bar {
    border-top-color: CanvasText;
  }

  /* =====================================================
   * SP ナビ
   * ===================================================== */
  .sp-nav {
    background-color: Canvas;
  }
  .sp-nav__header {
    border-bottom-color: CanvasText;
  }
  .sp-nav__item {
    border-bottom-color: CanvasText;
  }
  .sp-nav__item-hd--link,
  .sp-nav__cat,
  .sp-nav__sub {
    color: LinkText;
    border-bottom-color: CanvasText;
  }
  .sp-nav__item-hd--link:hover,
  .sp-nav__cat:hover,
  .sp-nav__sub:hover,
  .sp-nav__item-hd--link:focus-visible,
  .sp-nav__cat:focus-visible,
  .sp-nav__sub:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    forced-color-adjust: none;
  }
  /* 子要素に個別 color が設定されているため、hover 時に明示上書き */
  .sp-nav__item-hd--link:hover .sp-nav__item-ja,
  .sp-nav__item-hd--link:hover .sp-nav__item-en,
  .sp-nav__item-hd--link:focus-visible .sp-nav__item-ja,
  .sp-nav__item-hd--link:focus-visible .sp-nav__item-en {
    color: HighlightText;
  }
  .sp-nav__footer {
    background-color: Canvas;
    border-top: 2px solid CanvasText;
  }
  .sp-nav__item-ja {
    color: CanvasText;
  }
  .sp-nav__item-en,
  .sp-nav__toggle-icon {
    color: CanvasText;
  }
  .sp-nav__lang-item {
    color: LinkText;
  }
  .sp-nav__lang-item--active {
    color: CanvasText;
    font-weight: 700;
    text-decoration: underline;
  }

  /* =====================================================
   * ハンバーガーボタン
   * ===================================================== */
  .hamburger-btn__bar {
    background-color: CanvasText;
    forced-color-adjust: none;
  }

  /* =====================================================
   * linkBlue: forced-colors 環境でも LinkText を維持
   * ===================================================== */
  a.linkBlue {
    color: LinkText !important;
  }

  /* =====================================================
   * form-select: Bootstrap カスタム矢印SVGをネイティブに戻す
   * Bootstrap が appearance:none でネイティブ矢印を消し、SVG 背景画像で
   * 代替しているが、forced-colors 環境では背景画像が非表示になるため
   * ネイティブ appearance に戻してOSのHC矢印を表示させる
   * ===================================================== */
  .form-select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
    border: 1px solid CanvasText;
    color: CanvasText;
    background-color: Canvas;
  }

  /* =====================================================
   * news-list__pager-arrow: MT検索ページのページャー（＜ ＞）
   * var(--news-toolbar-pagination-color) など CSS変数経由の色指定を
   * 詳細度・読み込み順に関係なく上書きするため !important を使用
   * ===================================================== */
  .news-list__pager-arrow {
    color: LinkText !important;
    border-color: CanvasText !important;
    forced-color-adjust: none;
  }
  .news-list__pager-arrow:hover,
  .news-list__pager-arrow:focus-visible {
    color: HighlightText !important;
    background-color: Highlight !important;
    border-color: Highlight !important;
    forced-color-adjust: none;
  }
  .news-list__pager-arrow.is-disabled,
  .news-list__pager-arrow[aria-disabled="true"] {
    color: GrayText !important;
    border-color: GrayText !important;
    forced-color-adjust: none;
  }

  /* =====================================================
   * Bootstrap pagination（.page-link）
   * ===================================================== */
  .page-link {
    color: LinkText;
    background-color: Canvas;
    border-color: CanvasText;
  }
  .page-link:hover,
  .page-link:focus-visible {
    color: HighlightText;
    background-color: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }
  .page-item.active .page-link {
    color: HighlightText;
    background-color: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }
  .page-item.disabled .page-link {
    color: GrayText;
    border-color: GrayText;
  }

  /* =====================================================
   * article-detail__date-icon: カレンダーアイコン
   * SVG が fill:#212529（暗色）のため黒背景に溶けないよう白背景を付与
   * ===================================================== */
  .article-detail__date-icon {
    forced-color-adjust: none;
    background-color: #ffffff;
    border-radius: 2px;
    padding: 1px;
  }

  /* =====================================================
   * ロゴ: ハイコントラストモードでも白背景を保持
   * forced-color-adjust: none でOSの強制カラーを無効化し
   * ns-logo.png（暗色ロゴ＋透過背景）を視認できるようにする
   * ===================================================== */
  .site-header__logo img,
  .site-footer__logo {
    forced-color-adjust: none;
    background-color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
  }

  /* =====================================================
   * 無効・非アクティブ状態
   * ===================================================== */
  [disabled],
  [aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
    forced-color-adjust: none;
  }

  /* =====================================================
   * tech-history バルーン・メディアエントリ枠線
   * drop-shadow はHCモードで無効化されるため outline で代替
   * ===================================================== */
  .tech-history__balloon,
  .tech-history__media-entry__text {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
  /* 吹き出し三角の塗り（Canvas = 背景色）と枠（CanvasText）を維持 */
  /* デフォルト・--right: 右向き */
  .tech-history__balloon::before,
  .tech-history__media-entry__text::before {
    forced-color-adjust: none;
    border-color: transparent Canvas transparent transparent;
  }
  .tech-history__balloon::after,
  .tech-history__media-entry__text::after {
    forced-color-adjust: none;
    border-color: transparent CanvasText transparent transparent;
  }
  /* デスクトップ --left: 左向き */
  @media (min-width: 768px) {
    .tech-history__balloon--left::before,
    .tech-history__media-entry--left .tech-history__media-entry__text::before {
      border-color: transparent transparent transparent Canvas;
    }
    .tech-history__balloon--left::after,
    .tech-history__media-entry--left .tech-history__media-entry__text::after {
      border-color: transparent transparent transparent CanvasText;
    }
  }

  /* =====================================================
   * 画像の白枠線
   * history-of-tech のパンフ画像 / ニュース記事本文内の画像
   * ===================================================== */
  .tech-history__figure-img,
  .innertxt img {
    outline: 2px solid #ffffff;
    forced-color-adjust: none;
  }
}