/* ==========================================================================
   dads.css — デジタル庁デザインシステム（DADS）HTML版からの部分導入
   出典: C:\main\private\90_公開サイト\dads-html\ (MIT License, Digital Agency)
   導入部品: breadcrumb / toc (link・list依存) / notification-banner
   方針: global.css全体は持ち込まず、使用する変数のみ抽出。
         --font-family-sans は本サイトの既存フォントに合わせて上書き。
   導入日: 2026-07-18
   ========================================================================== */

:root {
  --color-neutral-black: #000000;
  --color-neutral-solid-gray-50: #f2f2f2;
  --color-neutral-solid-gray-200: #cccccc;
  --color-neutral-solid-gray-300: #b3b3b3;
  --color-neutral-solid-gray-420: #949494;
  --color-neutral-solid-gray-536: #767676;
  --color-neutral-solid-gray-800: #333333;
  --color-neutral-solid-gray-900: #1a1a1a;
  --color-neutral-white: #ffffff;
  --color-primitive-blue-200: #c5d7fb;
  --color-primitive-blue-300: #9db7f9;
  --color-primitive-blue-900: #0017c1;
  --color-primitive-blue-1000: #00118f;
  --color-primitive-blue-1200: #000060;
  --color-primitive-green-200: #9bd4b5;
  --color-primitive-green-300: #71c598;
  --color-primitive-green-800: #197a4b;
  --color-primitive-green-1000: #0c472a;
  --color-primitive-green-1200: #032213;
  --color-primitive-magenta-900: #8b008b;
  --color-primitive-orange-800: #c74700;
  --color-primitive-red-200: #ffbbbb;
  --color-primitive-red-300: #ff9696;
  --color-primitive-red-800: #ec0000;
  --color-primitive-red-1000: #a90000;
  --color-primitive-red-1200: #620000;
  --color-primitive-yellow-200: #ffe380;
  --color-primitive-yellow-300: #ffd43d;
  --color-primitive-yellow-400: #ffc700;
  --color-primitive-yellow-900: #927200;
  --color-primitive-yellow-1000: #806300;
  --color-primitive-yellow-1200: #604b00;
  --color-semantic-error-1: var(--color-primitive-red-800);
  --color-semantic-success-2: var(--color-primitive-green-800);
  --color-semantic-warning-yellow-2: var(--color-primitive-yellow-900);
  /* 本サイト既存フォントに合わせる（DADS標準は Noto Sans JP） */
  --font-family-sans: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

.dads-u-visually-hidden {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* ===== breadcrumb ===== */
.dads-breadcrumb {
  display: flex;
  column-gap: calc(4 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-breadcrumb__label {
  flex-shrink: 0;
}

.dads-breadcrumb__label::after {
  content: "：";
}

.dads-breadcrumb__list {
  list-style-type: "";
  margin: 0;
  padding: 0;
}

.dads-breadcrumb__item {
  display: inline;
  overflow-wrap: break-word;
}

.dads-breadcrumb__link:any-link {
  color: var(--color-primitive-blue-1000);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
}

@media (hover: hover) {
  .dads-breadcrumb__link:hover {
    color: var(--color-primitive-blue-900);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-breadcrumb__link:active {
  color: var(--color-primitive-orange-800);
  text-decoration-thickness: calc(1 / 16 * 1rem);
}

.dads-breadcrumb__link:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-breadcrumb__link-icon {
  display: inline-block;
  vertical-align: -0.15em;
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
}

.dads-breadcrumb__separator::before,
.dads-breadcrumb__separator::after {
  content: " ";
}

.dads-breadcrumb__separator-icon {
  display: inline-block;
  margin-right: calc(1 / 16 * 1rem);
  margin-left: calc(1 / 16 * 1rem);
  width: calc(12 / 16 * 1rem);
  height: calc(12 / 16 * 1rem);
  vertical-align: middle;
  color: var(--color-neutral-solid-gray-900);
}
/* ===== link ===== */
.dads-link:any-link {
  color: var(--color-primitive-blue-1000);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
}

.dads-link:visited {
  color: var(--color-primitive-magenta-900);
}

@media (hover: hover) {
  .dads-link:hover {
    color: var(--color-primitive-blue-900);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-link:active {
  color: var(--color-primitive-orange-800);
  text-decoration-thickness: calc(1 / 16 * 1rem);
}

.dads-link:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-link__icon {
  display: inline-block;
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
  vertical-align: -0.15em;
}
/* ===== list ===== */
.dads-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: calc(32 / 16 * 1rem);
  list-style-type: revert;
}

.dads-list > li {
  --_spacing: 0;
  padding-top: var(--_spacing);
  padding-bottom: var(--_spacing);
}

.dads-list[data-spacing="4"] > li {
  --_spacing: calc(4 / 16 * 1rem);
}

.dads-list[data-spacing="8"] > li {
  --_spacing: calc(8 / 16 * 1rem);
}

.dads-list[data-spacing="12"] > li {
  --_spacing: calc(12 / 16 * 1rem);
}

.dads-list[data-marker="number"] {
  padding-left: 0;
  list-style-type: none;
}

.dads-list[data-marker="number"] > li {
  padding-left: calc(32 / 16 * 1rem);
}

.dads-list[data-marker="number"] > li > a:only-child {
  margin-left: calc(-32 / 16 * 1rem);
  padding-left: calc(32 / 16 * 1rem);
}

.dads-list[data-marker="number"] > li > span:first-child,
.dads-list[data-marker="number"] > li > a:only-child > span:first-child {
  margin-left: calc(-32 / 16 * 1rem);
  display: inline-block;
  min-width: calc(32 / 16 * 1rem);
  white-space: nowrap;
}

.dads-list[data-marker="number"] > li > a:only-child > span:first-child {
  text-decoration: inherit;
}

.dads-list .dads-list {
  margin-top: var(--_spacing);
  margin-bottom: calc(-1 * var(--_spacing));
}
/* ===== toc ===== */
.dads-toc {
  width: fit-content;
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-toc[data-border] {
  border: 1px var(--color-neutral-solid-gray-420);
  padding-top: calc(12 / 16 * 1rem);
  padding-right: calc(24 / 16 * 1rem);
  padding-bottom: calc(24 / 16 * 1rem);
  padding-left: calc(20 / 16 * 1rem);
}

.dads-toc[data-border="dotted"] {
  border-style: dotted;
}

.dads-toc[data-border="solid"] {
  border-style: solid;
}

.dads-toc__heading {
  margin-top: 0;
  margin-bottom: calc(8 / 16 * 1rem);
  font: inherit;
  letter-spacing: inherit;
}

.dads-toc .dads-link:any-link {
  color: inherit;
}

.dads-toc > .dads-list:has(.dads-list) {
  padding-left: 0;
  list-style-type: none;
  font-weight: bold;
}

.dads-toc > .dads-list .dads-list {
  list-style-type: disc;
}

.dads-toc > .dads-list > li > .dads-list {
  margin-top: 0;
  font-weight: normal;
}

.dads-toc > .dads-list .dads-list .dads-list {
  list-style-type: circle;
}
/* ===== notification-banner ===== */
.dads-notification-banner {
  --_base-color: var(--color-primitive-blue-900);
  --_color-chip-color: var(--color-primitive-blue-900);
  display: grid;
  grid-template-columns: calc(24 / 16 * 1rem) 1fr auto;
  grid-template-rows: minmax(calc(36 / 16 * 1rem), auto);
  border: solid var(--_base-color);
  background-color: var(--color-neutral-white);
  padding-top: calc(8 / 16 * 1rem);
  padding-right: calc(16 / 16 * 1rem);
  padding-bottom: calc(24 / 16 * 1rem);
  padding-left: calc(16 / 16 * 1rem);
  gap: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-notification-banner[data-style="standard"] {
  border-radius: calc(12 / 16 * 1rem);
  border-width: calc(3 / 16 * 1rem);
}

.dads-notification-banner[data-style="color-chip"] {
  border-width: calc(2 / 16 * 1rem);
  padding-left: calc(24 / 16 * 1rem);
  box-shadow: inset calc(8 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
}

@media (min-width: 48rem) {
  .dads-notification-banner {
    grid-template-columns: calc(36 / 16 * 1rem) 1fr auto;
    padding-top: calc(24 / 16 * 1rem);
    padding-right: calc(24 / 16 * 1rem);
    padding-bottom: calc(32 / 16 * 1rem);
    padding-left: calc(24 / 16 * 1rem);
    column-gap: calc(24 / 16 * 1rem);
  }

  .dads-notification-banner[data-style="color-chip"] {
    padding-left: calc(40 / 16 * 1rem);
    box-shadow: inset calc(16 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
  }
}

.dads-notification-banner[data-type="success"] {
  --_base-color: var(--color-semantic-success-2);
  --_color-chip-color: var(--color-semantic-success-2);
}

.dads-notification-banner[data-type="error"] {
  --_base-color: var(--color-semantic-error-1);
  --_color-chip-color: var(--color-semantic-error-1);
}

.dads-notification-banner[data-type="warning"] {
  --_base-color: var(--color-semantic-warning-yellow-2);
  --_color-chip-color: var(--color-primitive-yellow-400);
}

.dads-notification-banner[data-type="info-1"] {
  --_base-color: var(--color-primitive-blue-900);
  --_color-chip-color: var(--color-primitive-blue-900);
}

.dads-notification-banner[data-type="info-2"] {
  --_base-color: var(--color-neutral-solid-gray-536);
  --_color-chip-color: var(--color-neutral-solid-gray-536);
}

.dads-notification-banner__icon {
  justify-self: center;
  width: calc(28 / 16 * 1rem);
  height: calc(28 / 16 * 1rem);
  max-width: none;
  max-height: none;
  padding-top: calc(3 / 16 * 1rem);
  color: var(--_base-color);
}

@media (min-width: 48rem) {
  .dads-notification-banner__icon {
    margin-top: calc(-4 / 16 * 1rem);
    margin-bottom: calc(-4 / 16 * 1rem);
    width: calc(44 / 16 * 1rem);
    height: calc(44 / 16 * 1rem);
    padding: 0;
  }
}

@media (forced-colors: active) {
  .dads-notification-banner__icon {
    color: currentcolor;
  }
}

.dads-notification-banner__heading {
  grid-column: span 2;
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
}

.dads-notification-banner__heading-text {
  padding-top: calc(3 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

@media (min-width: 48rem) {
  .dads-notification-banner__heading-text {
    padding-top: calc(2 / 16 * 1rem);
    font-size: calc(20 / 16 * 1rem);
    line-height: 1.5;
  }
}

.dads-notification-banner__close {
  margin-right: calc(-12 / 16 * 1rem);
  display: flex;
  align-self: start;
  align-items: center;
  column-gap: calc(4 / 16 * 1rem);
  background: transparent;
  border-radius: calc(8 / 16 * 1rem);
  border: 0;
  padding-top: calc(4 / 16 * 1rem);
  padding-right: calc(12 / 16 * 1rem);
  padding-bottom: calc(6 / 16 * 1rem);
  padding-left: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
}

@media (hover: hover) {
  .dads-notification-banner__close:hover {
    background-color: var(--color-neutral-solid-gray-50);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
    text-underline-offset: calc(3 / 16 * 1rem);
  }
}

.dads-notification-banner__close:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-notification-banner__close-icon {
  margin-top: calc(2 / 16 * 1rem);
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
}

.dads-notification-banner__mobile-close {
  margin-top: calc(4 / 16 * 1rem);
  border: 0;
  border-radius: calc(4 / 16 * 1rem);
  background: transparent;
  padding: 0;
  color: var(--color-neutral-black);
  touch-action: manipulation;
}

@media (hover: hover) {
  .dads-notification-banner__mobile-close:hover {
    outline: 1px solid;
    background-color: var(--color-neutral-solid-gray-50);
  }
}

.dads-notification-banner__mobile-close:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-notification-banner__mobile-close-icon {
  display: block;
  width: calc(44 / 16 * 1rem);
  height: calc(44 / 16 * 1rem);
}

.dads-notification-banner__body {
  margin-top: calc(-4 / 16 * 1rem);
  display: grid;
  row-gap: calc(8 / 16 * 1rem);
  grid-column: 1 / 4;
  color: var(--color-neutral-solid-gray-800);
}

@media (min-width: 48rem) {
  .dads-notification-banner__body {
    margin-top: 0;
    grid-column: 2 / 4;
  }
}

.dads-notification-banner__body > * {
  margin-top: 0;
  margin-bottom: 0;
}

.dads-notification-banner__timestamp time {
  text-autospace: normal;
}

.dads-notification-banner__actions {
  margin-bottom: calc(-8 / 16 * 1rem);
  display: grid;
  gap: calc(8 / 16 * 1rem);
  grid-column: 1 / 4;
}

@media (min-width: 48rem) {
  .dads-notification-banner__actions {
    grid-auto-flow: column;
    gap: calc(16 / 16 * 1rem);
    grid-column: 2 / 4;
    justify-content: end;
  }
}

.dads-notification-banner .dads-button {
  width: auto;
}

.dads-notification-banner[data-type="success"] .dads-button {
  --button-color: var(--color-semantic-success-2);
  --button-hover-color: var(--color-primitive-green-1000);
  --button-active-color: var(--color-primitive-green-1200);
  --button-outline-hover-bg-color: var(--color-primitive-green-200);
  --button-outline-active-bg-color: var(--color-primitive-green-300);
}

.dads-notification-banner[data-type="error"] .dads-button {
  --button-color: var(--color-semantic-error-1);
  --button-hover-color: var(--color-primitive-red-1000);
  --button-active-color: var(--color-primitive-red-1200);
  --button-outline-hover-bg-color: var(--color-primitive-red-200);
  --button-outline-active-bg-color: var(--color-primitive-red-300);
}

.dads-notification-banner[data-type="warning"] .dads-button {
  --button-color: var(--color-semantic-warning-yellow-2);
  --button-hover-color: var(--color-primitive-yellow-1000);
  --button-active-color: var(--color-primitive-yellow-1200);
  --button-outline-hover-bg-color: var(--color-primitive-yellow-200);
  --button-outline-active-bg-color: var(--color-primitive-yellow-300);
}

.dads-notification-banner[data-type="info-1"] .dads-button {
  --button-color: var(--color-primitive-blue-900);
  --button-hover-color: var(--color-primitive-blue-1000);
  --button-active-color: var(--color-primitive-blue-1200);
  --button-outline-hover-bg-color: var(--color-primitive-blue-200);
  --button-outline-active-bg-color: var(--color-primitive-blue-300);
}

.dads-notification-banner[data-type="info-2"] .dads-button {
  --button-color: var(--color-neutral-solid-gray-800);
  --button-hover-color: var(--color-neutral-solid-gray-900);
  --button-active-color: var(--color-neutral-black);
  --button-outline-hover-bg-color: var(--color-neutral-solid-gray-200);
  --button-outline-active-bg-color: var(--color-neutral-solid-gray-300);
}