@charset "utf-8";
/*======================================
highcontrast.css
色変更による設定以外追記しない（幅、高さ、余白など）
======================================*/

/*===========================
Basic
=============================*/
:root {
  --background: #000;
  /* ------- Colors from Design System ------- */
  /* neutral */
  --color-neutral-0: #000;
  --color-neutral-5: #1a1a1a;
  --color-neutral-10: #333;
  --color-neutral-20: #4d4d4d;
  --color-neutral-30: #666;
  --color-neutral-40: #767676;
  --color-neutral-42: #7f7f7f;
  --color-neutral-50: #949494;
  --color-neutral-54: #999;
  --color-neutral-60: #b3b3b3;
  --color-neutral-70: #ccc;
  --color-neutral-80: #e6e6e6;
  --color-neutral-90: #f2f2f2;
  --color-neutral-100: #fff;
  /* color-blue */
  --color-blue-90: var(--color-neutral-0);
  --color-blue-80: var(--color-neutral-5);
  --color-blue-70: var(--color-neutral-10);
  --color-blue-60: var(--color-neutral-20);
  --color-blue-50: var(--color-neutral-30);
  --color-blue-40: var(--color-neutral-40);
  --color-blue-30: var(--color-neutral-30);
  --color-blue-20: var(--color-neutral-40);
  --color-blue-10: var(--color-neutral-50);
  --color-blue-05: var(--color-neutral-60);
  /* category */
  --color-category-010: #333;
  --color-category-011: #fff;
  --color-category-020: #333;
  --color-category-021: #fff;
  --color-category-030: #333;
  --color-category-031: #fff;
  --color-category-040: #333;
  --color-category-041: #fff;
  --color-important: #bc4545;
  /* Semantic Colors:Text Colors */
  --color-text-default: #fff;
  --color-text-bold: #fff;
  --color-text-link: #00eaff;
  --color-text-placeholder: var(--color-neutral-42);
  --color-text-important: var(--color-important);
  --color-text-disabled: var(--color-neutral-54);
  --color-text-inverse: #fff;
  --color-text-bredcrumb: var(--color-text-default);
  --color-text-bredcrumb-link: var(--color-text-link);
  --color-text-black: var(--color-neutral-100);
  --color-text-white: #fff;
  /* Semantic Colors:Background Colors */
  --color-background-default: #333;
  --color-background-active: ;
  --color-background-disabled: ;
  --color-background-theme: #222;
  --color-background-subtle: #333;
  --color-background-subtler: #000;
  --color-background-bold: #000;
  --color-background-accent: #000;
  --color-background-hover: #111;
  /* Semantic Colors:Border Colors */
  --border-default: #fff;
  --border-subtle: #fff;
  --border-subtler: #fff;
  --border-accent: #fff;
  --border-theme: #fff;
  --border-bold: #fff;
  --border-ring: #fff;
  --border-black: #fff;
  --border-table: #fff;
  --border-inverse: #fff;
  --border-focus: #ffff00;
  --border-section: #fff;

  --txtbox-link-color: var(--color-text-link);

  /* Semantic Colors:Button Colors */
  --button-color-default: var(--color-text-default);

  /* Semantic Colors:UD*/
  --ud--search-form-background-focused: #000000;

  /* Semantic Colors:totop */
  --totop--border-color: var(--border-bold);

  /* Semantic Colors:Table */
  --table--th-background-color: #333;
}

img.invert {
  filter: invert(1);
}
.site-header__title-logo img,
.site-footer__title-logo img {
  filter: invert(1);
}
.drawer {
  background: #333;
}
.drawer-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
.bg:has(+ .top-news) {
  background-color: #111;
}
.bg:has(+ .top-news) img {
  filter: brightness(0.2) contrast(1.2);
}
.top-news {
  background-color: #191c1f;
}
.bg:has(+ .db-section) {
  background-color: #191c1f;
}
.bg:has(+ .db-section) img {
  filter: brightness(0.2) contrast(1.2);
}
.db-section {
  background-color: #222221;
}
.bg:has(+ .info-section) {
  background-color: #222221;
}
.bg:has(+ .info-section) img {
  filter: brightness(0.2) contrast(1.2);
}
.info-section {
  background-color: #13181d;
}

.voice-read::before,
.language-select__label::before,
.pagetitle__label::after,
.slick-prev::before,
.slick-next::before {
  filter: invert(1) brightness(100);
}
.text-links__link::after,
.top-info__more::after,
.main-visual__link::after,
.main-visual__link-text:after {
  filter: invert(1);
}

.menu-nav__link:hover,
.menu-nav__link:focus-within,
.main-visual__link--icon:hover,
.main-visual__link--icon:focus-within {
  background-color: var(--color-neutral-30);
  border-color: var(--color-white);
  outline-color: var(--border-bold);
}