/*
 * 企業版ふるさと納税ポータル
 * Tailwind CDN + Pastel Public UI Theme
 * Tailwindで表現しにくいものだけここに書く
 */

/* 見出し系は丸ゴシックで統一 */
h1, h2, h3, h4, h5, h6 {
  font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* リンクの下線オフセット */
a {
  text-underline-offset: 0.15em;
}

/* 都道府県トップのヒーロー (行政サイト調・濃いテキスト)
   見出しは既存の application.css 既定 (h1〜h6) で丸ゴシック、本文は普通のゴシックを継承。
   ユニバーサルデザイン志向: 字を大きく、コントラスト強く。 */

/* ===========================================================
   ユニバーサルデザイン (サイト共通) — デジタル庁デザインシステム + 渋谷区 (グッドデザイン100) 参照

   出典:
   - https://design.digital.go.jp/foundations/typography/
   - https://design.digital.go.jp/foundations/typography/accessibility/
   - https://design.digital.go.jp/foundations/color/accessibility/
   - https://www.city.shibuya.tokyo.jp/

   準拠ポイント:
   - 推奨フォント: Noto Sans JP (デジタル庁標準)
   - 本文最低 16px、行間 150% 以上、段落間隔は行ボックスの 1.5 倍以上
   - 見出し行間 140%
   - コントラスト比 4.5:1 以上 (WCAG AA)、可能なら 7:1 (AAA)
   - 本文リンクは色＋下線 (色だけに頼らない)

   適用スコープ: main 配下のみ。header / footer / nav はレイアウト保護のため対象外。
   ヒーロー (main > header.relative.w-screen) も全幅レイアウトを壊さないよう除外する。
   ===========================================================*/

/* (1) フォントファミリ: サイト全体に Noto Sans JP を優先 (見出しは別途丸ゴシック上書き済) */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

/* (2) 色: コントラスト 4.5:1 未達の text-txt-subtle (3.5:1) を全サイトで gray-700 (5.7:1) に */
.text-txt-subtle {
  color: rgb(55, 65, 81) !important;
}

/* (3) main 内本文の底上げ. デフォルトでは main 全体に適用し、
       ヒーロー部分 (main > header) はレイアウト保護のため除外する。 */
main .text-sm {
  font-size: 16px;
  line-height: 1.75;
}
main .text-xs {
  font-size: 14px;
  line-height: 1.6;
}
/* ヒーロー (main > header) 内は既存サイズ・行間を維持 */
main > header .text-sm {
  font-size: 0.875rem;  /* Tailwind text-sm 既定 */
  line-height: 1.25rem;
}
main > header .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* (4) 本文色: 既存の text-txt (rgb 21,32,51 ≒ AAA 14:1) で十分濃いため強制上書きしない。
       text-txt-subtle (3.5:1) のみ前述で gray-700 (5.7:1) に底上げ済み。
       意図的なカラー指定 (text-primary 等) は尊重する方針。 */

/* (5) 段落間隔 (デジタル庁推奨) */
main section p + p {
  margin-top: 0.75em;
}

/* (6) 見出し行間 140% (main 全体、ヒーローも適用してよい) */
main h2,
main h3 {
  line-height: 1.45;
}

/* (7) 本文リンクは常時下線 (色だけに頼らない)。
       カード型リンク (.no-underline-link) と既存ボタン系 (bg- / rounded- が付くもの) は除外。
       main > section 配下のテキストリンクのみ対象 (ヒーローはホバー時のみ下線を維持)。 */
main > section a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]),
main > div > a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
main > section a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]):hover {
  text-decoration-thickness: 2px;
}
/* SVG 内 text (地図ラベル等) は下線対象外 */
main svg text {
  text-decoration: none;
}

/* (8) 旧 .pref-uda は後方互換のため残す (no-op) */
.pref-uda { /* no-op, kept for backward compat */ }

/* ===========================================================
   ボタンコンポーネント — デジタル庁デザインシステム準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/button

   採用方針:
   - 公式の構造 (data-type / data-size 属性) を採用
   - 色はサイト固有 (Tailwind の primary 等) を使い、公式の #0017c1 ベタ青には
     置換しない (ブランド一貫性のため)
   - アクセシビリティ要素は公式準拠: focus-visible 黄色アウトライン、
     44px 最小タップ領域 (sm/xs で ::after 補強)、disabled 明示

   使い方:
     <button class="dads-button" data-type="solid-fill" data-size="md">送信</button>
     <a class="dads-button" data-type="outline" data-size="md">キャンセル</a>
     <a class="dads-button" data-type="text" data-size="sm">詳細を見る</a>
   =========================================================== */
.dads-button {
  /* Tailwind CDN (Play CDN) では theme() 関数が解決されず空値になるので実色リテラルで指定。
     ビルド版 Tailwind に移行したら theme("colors.primary", #3a73d8) 等に戻して良い。 */
  --dads-btn-color: #3a73d8;
  --dads-btn-hover: #2d5eb8;
  --dads-btn-active: #1f4280;
  --dads-btn-outline-hover-bg: #e6efff;
  --dads-btn-outline-active-bg: #d0e0ff;
  --dads-btn-focus-ring: #ffd43d;  /* yellow-300 相当、公式と同じ */
  --dads-btn-disabled-bg: #b3b3b3;
  --dads-btn-disabled-fg: #f2f2f2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  font-weight: 700;
  font-size: 1rem;       /* 16px */
  line-height: 1;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-underline-offset: 0.1875rem;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dads-button:disabled,
.dads-button[aria-disabled="true"] {
  cursor: default;
}

/* --- type: solid-fill (主要ボタン) --- */
.dads-button[data-type="solid-fill"] {
  border: 4px double transparent;
  background-color: var(--dads-btn-color);
  color: #ffffff;
}
@media (hover: hover) {
  .dads-button[data-type="solid-fill"]:hover {
    background-color: var(--dads-btn-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}
.dads-button[data-type="solid-fill"]:active {
  background-color: var(--dads-btn-active);
  text-decoration: underline;
}
.dads-button[data-type="solid-fill"]:focus-visible {
  outline: 0.25rem solid #000000;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--dads-btn-focus-ring);
}
.dads-button[data-type="solid-fill"]:disabled,
.dads-button[data-type="solid-fill"][aria-disabled="true"] {
  background-color: var(--dads-btn-disabled-bg);
  color: var(--dads-btn-disabled-fg);
  text-decoration: none;
}

/* --- type: outline (副ボタン) --- */
.dads-button[data-type="outline"] {
  border: 1px solid currentcolor;
  background-color: #ffffff;
  color: var(--dads-btn-color);
}
@media (hover: hover) {
  .dads-button[data-type="outline"]:hover {
    background-color: var(--dads-btn-outline-hover-bg);
    color: var(--dads-btn-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}
.dads-button[data-type="outline"]:active {
  background-color: var(--dads-btn-outline-active-bg);
  color: var(--dads-btn-active);
  text-decoration: underline;
}
.dads-button[data-type="outline"]:focus-visible {
  outline: 0.25rem solid #000000;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--dads-btn-focus-ring);
}
.dads-button[data-type="outline"]:disabled,
.dads-button[data-type="outline"][aria-disabled="true"] {
  background-color: #ffffff;
  color: var(--dads-btn-disabled-bg);
  text-decoration: none;
}

/* --- type: text (テキストボタン) --- */
.dads-button[data-type="text"] {
  border: 0;
  background-color: transparent;
  color: var(--dads-btn-color);
  text-decoration: underline;
}
@media (hover: hover) {
  .dads-button[data-type="text"]:hover {
    background-color: #e8f1fe;
    color: var(--dads-btn-hover);
    text-decoration-thickness: 3px;
  }
}
.dads-button[data-type="text"]:active {
  background-color: #d9e6ff;
  color: var(--dads-btn-active);
}
.dads-button[data-type="text"]:focus-visible {
  outline: 0.25rem solid #000000;
  outline-offset: 0.125rem;
  background-color: var(--dads-btn-focus-ring);
  box-shadow: 0 0 0 0.125rem var(--dads-btn-focus-ring);
}
.dads-button[data-type="text"]:disabled,
.dads-button[data-type="text"][aria-disabled="true"] {
  background-color: transparent;
  color: var(--dads-btn-disabled-bg);
  text-decoration-thickness: revert;
}

/* --- size: lg / md / sm / xs --- */
.dads-button[data-size="lg"] {
  min-width: 8.5rem;     /* 136px */
  min-height: 3.5rem;    /* 56px */
  border-radius: 0.5rem; /* 8px */
  padding: 0.75rem 1rem;
}
.dads-button[data-size="md"] {
  min-width: 6rem;       /* 96px */
  min-height: 3rem;      /* 48px */
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}
.dads-button[data-size="sm"] {
  position: relative;
  min-width: 5rem;       /* 80px */
  min-height: 2.25rem;   /* 36px */
  border-radius: 0.375rem;
  padding: 0.125rem 0.75rem;
}
/* 44px 最小タップ領域確保 (公式準拠) */
.dads-button[data-size="sm"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: 2.75rem;       /* 44px */
}
.dads-button[data-size="xs"] {
  position: relative;
  min-width: 4.5rem;     /* 72px */
  min-height: 1.75rem;   /* 28px */
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;   /* 14px */
}
.dads-button[data-size="xs"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: 2.75rem;
}

/* ===========================================================
   アコーディオン (<details>) — デジタル庁デザインシステム準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/accordion

   サイト内既存の <details> をそのまま準拠化するためマークアップ追加なし。
   公式のクラス (.dads-accordion など) 指定は不要、details/summary 要素セレクタで自動適用。

   - 下線で区切り、左に開閉アイコン (CSS で描画)、開いた時に回転
   - hover: 薄グレー背景
   - focus-visible: 黄色ハイライト + 黒アウトライン
   - summary は 16px、md以上は 18px (本文と階層差をつける)
   =========================================================== */
main details {
  border-bottom: 1px solid #949494;  /* gray-420 相当 */
}
main details > summary {
  position: relative;
  display: block;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  color: #1f2937;
  font-weight: 400;
  font-size: 1rem;     /* 16px */
  line-height: 1.7;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}
main details > summary::-webkit-details-marker {
  display: none;
}
main details > summary::marker {
  content: "";
}
/* 開閉アイコン (◯ + ▼) */
main details > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000118f'%3E%3Cpath d='M3 6l5 5 5-5z'/%3E%3C/svg%3E");
  background-size: 0.875rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}
main details[open] > summary::before {
  transform: rotate(180deg);
}
@media (hover: hover) {
  main details > summary:hover:not(:focus-visible) {
    background-color: #f2f2f2;
  }
}
main details > summary:focus-visible {
  outline: 4px solid #000;
  outline-offset: 2px;
  border-radius: 4px;
  background-color: #ffd43d;  /* yellow-300 */
  box-shadow: 0 0 0 2px #ffd43d;
}
@media (min-width: 48rem) {
  main details > summary {
    padding: 1rem 1rem 1rem 2.75rem;
    font-size: 1.125rem;  /* 18px */
    line-height: 1.6;
  }
  main details > summary::before {
    width: 2rem;
    height: 2rem;
    left: 0.375rem;
    margin-top: -1rem;
    background-size: 1.25rem;
  }
}
/* 中身に padding */
main details > :not(summary) {
  padding: 0.5rem 0.5rem 1rem 2rem;
}
@media (min-width: 48rem) {
  main details > :not(summary) {
    padding: 0.75rem 1rem 1.5rem 2.75rem;
  }
}

/* ===========================================================
   テーブル — デジタル庁デザインシステム準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/table

   サイト内 57 箇所のテーブルを要素セレクタで自動適用。
   既存の Tailwind クラス (text-sm, font-bold, bg-* 等) は維持。
   - border-collapse、垂直中央、padding (20px/16px)、font-size 16px、line-height 1.7
   - data-size="dense" 相当は別途 .table-dense クラスで12px パディングを提供
   - 既存テーブル (青森の en-hyouban 調) はクラス指定で個別装飾を維持
   =========================================================== */
main table {
  border-collapse: collapse;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #1f2937;
}
main table th,
main table td {
  /* 既存の py-* px-* p-* クラスがあればそちらが優先される (要素直接の padding はデフォルトのみ) */
  vertical-align: baseline;
}
main table th {
  font-weight: 700;
}
main table caption {
  font-weight: 700;
  font-size: 1.0625rem;  /* 17px */
  text-align: left;
  margin-bottom: 0.5rem;
}

/* dense 版 (条件: <table class="table-dense">) */
main table.table-dense {
  line-height: 1.3;
}
main table.table-dense th,
main table.table-dense td {
  padding: 0.75rem 1rem;
}

/* ストライプ (条件: <table class="table-striped">) */
main table.table-striped tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* hover ハイライト (条件: <table class="table-hover">) */
@media (hover: hover) {
  main table.table-hover tbody tr:hover {
    background-color: #e8f1fe;
  }
}

/* ===========================================================
   フォーム要素 — デジタル庁デザインシステム準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/input-text

   - border 1px gray-600、border-radius 8px、padding 12px/16px
   - font-size 16px (iOS でズームを防ぐ最低限)
   - サイズ: sm 40px / md 48px / lg 56px
   - focus-visible: 黄色背景 + 黒 4px アウトライン (公式準拠)
   - hover: border が黒に
   - invalid: border が赤
   - readonly: 破線
   =========================================================== */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="search"],
main input[type="url"],
main input[type="password"],
main input[type="date"],
main select,
main textarea {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid #7f7f7f;  /* gray-500/600 中間 */
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #1f2937;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
main textarea {
  line-height: 1.7;
}
/* デフォルト高さ (sm = 40px) */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="search"],
main input[type="url"],
main input[type="password"],
main input[type="date"],
main select {
  height: 2.5rem;
}
/* サイズ修飾 (data-size 属性または .input-md / .input-lg クラス) */
main input[data-size="md"], main select[data-size="md"], main .input-md {
  height: 3rem;
}
main input[data-size="lg"], main select[data-size="lg"], main .input-lg {
  height: 3.5rem;
}

/* readonly (破線) */
main input:read-only:not(:disabled),
main select:disabled,
main textarea:read-only:not(:disabled) {
  border-style: dashed;
}

/* focus-visible (公式準拠: 黄色背景 + 黒アウトライン) */
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffd43d;  /* yellow-300 */
}

/* hover */
@media (hover: hover) {
  main input:not(:read-only):hover,
  main select:not(:disabled):hover,
  main textarea:not(:read-only):hover {
    border-color: #000000;
  }
}

/* invalid */
main input:user-invalid,
main input[aria-invalid="true"],
main select:user-invalid,
main select[aria-invalid="true"],
main textarea:user-invalid,
main textarea[aria-invalid="true"] {
  border-color: #c74700;  /* red-800 / semantic-error-1 */
}

/* disabled */
main input:disabled,
main select:disabled,
main textarea:disabled {
  background-color: #f2f2f2;
  color: #7f7f7f;
  cursor: not-allowed;
}

/* placeholder color */
main input::placeholder,
main textarea::placeholder {
  color: #7f7f7f;
}

/* ===========================================================
   通知バナー (.notification-banner) — デジタル庁デザインシステム準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/notification-banner

   2 style: standard (border-radius あり) / color-chip (左に色帯)
   5 type: info-1 / info-2 / success / warning / error

   使い方:
   <aside class="notification-banner" data-style="color-chip" data-type="warning">
     <p class="notification-banner__heading">タイトル</p>
     <p>本文</p>
   </aside>
   =========================================================== */
.notification-banner {
  --nb-base: #00118f;  /* blue-1000、デフォルト info-1 */
  --nb-chip: var(--nb-base);
  display: block;
  border: solid var(--nb-base);
  background-color: #ffffff;
  padding: 0.5rem 1rem 1.5rem 1rem;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.notification-banner[data-style="standard"] {
  border-radius: 0.75rem;
  border-width: 3px;
}
.notification-banner[data-style="color-chip"] {
  border-width: 2px;
  padding-left: 1.5rem;
  box-shadow: inset 0.5rem 0 0 0 var(--nb-chip);
}
@media (min-width: 48rem) {
  .notification-banner {
    padding: 1.5rem;
  }
  .notification-banner[data-style="color-chip"] {
    padding-left: 2.5rem;
    box-shadow: inset 1rem 0 0 0 var(--nb-chip);
  }
}
.notification-banner[data-type="info-1"] {
  --nb-base: #00118f;
}
.notification-banner[data-type="info-2"] {
  --nb-base: #767676;  /* gray-536 */
}
.notification-banner[data-type="success"] {
  --nb-base: #197a4b;  /* green-800 */
}
.notification-banner[data-type="warning"] {
  --nb-base: #927200;  /* yellow-900 */
  --nb-chip: #ffc700;  /* yellow-400 (公式と同じ chip 色) */
}
.notification-banner[data-type="error"] {
  --nb-base: #c74700;  /* red-800 */
}
.notification-banner__heading {
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 0.5rem 0;
  color: var(--nb-base);
}
.notification-banner > p + p {
  margin-top: 0.5rem;
}

/* ===========================================================
   パンくず (.dads-breadcrumb) — デジタル庁公式準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/breadcrumb
   =========================================================== */
.dads-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25rem;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.dads-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.25rem;
}
.dads-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  overflow-wrap: break-word;
}
.dads-breadcrumb__link:any-link {
  color: #00118f;  /* blue-1000 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875rem;
}
@media (hover: hover) {
  .dads-breadcrumb__link:hover {
    color: #0017c1;  /* blue-900 */
    text-decoration-thickness: 3px;
  }
}
.dads-breadcrumb__link:active {
  color: #c74700;  /* orange-800 */
  text-decoration-thickness: 1px;
}
.dads-breadcrumb__link:focus-visible {
  outline: 4px solid #000;
  outline-offset: 2px;
  border-radius: 4px;
  background-color: #ffd43d;
  box-shadow: 0 0 0 2px #ffd43d;
}
.dads-breadcrumb__separator {
  color: #767676;
  padding: 0 0.25rem;
}

/* ===========================================================
   Chip Label (.dads-chip-label) — デジタル庁公式準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/chip-label

   4 style: text / outline / filled-outline / fill
   主要カラー: gray / blue / red / yellow / green
   =========================================================== */
.dads-chip-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2rem;
  border-radius: 0.5rem;
  padding: 0.1875rem 0.4375rem;
  font-weight: 400;
  font-size: 0.875rem;  /* 14px、サイト内ラベル用に少し小さめ */
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dads-chip-label[data-style="text"] {
  padding: 0.25rem 0.5rem;
  color: var(--chip-text, #000);
}
.dads-chip-label[data-style="outline"] {
  border: 1px solid var(--chip-border, #000);
  color: var(--chip-text, #000);
}
.dads-chip-label[data-style="filled-outline"] {
  border: 1px solid var(--chip-border, #000);
  background-color: var(--chip-bg, #eee);
  color: var(--chip-text, #000);
}
.dads-chip-label[data-style="fill"] {
  border: 1px solid transparent;
  background-color: var(--chip-border, #000);
  color: #ffffff;
}
.dads-chip-label[data-color="gray"] {
  --chip-border: #b3b3b3;
  --chip-bg: #f2f2f2;
  --chip-text: #1f2937;
}
.dads-chip-label[data-color="blue"] {
  --chip-border: #264af4;
  --chip-bg: #e8f1fe;
  --chip-text: #0031d8;
}
.dads-chip-label[data-color="red"] {
  --chip-border: #fa0000;
  --chip-bg: #fdeeee;
  --chip-text: #c70202;
}
.dads-chip-label[data-color="yellow"] {
  --chip-border: #ffc700;
  --chip-bg: #fbf5e0;
  --chip-text: #927200;
}
.dads-chip-label[data-color="green"] {
  --chip-border: #197a4b;
  --chip-bg: #e6f5ec;
  --chip-text: #115a36;
}

/* ===========================================================
   Description List (.dads-description-list) — デジタル庁公式準拠
   https://github.com/digital-go-jp/design-system-example-components-html
     /tree/main/src/components/description-list

   <dl class="dads-description-list">
     <dt>項目</dt><dd>値</dd>
   </dl>
   data-marker="bullet" / "custom" でマーカー切替
   =========================================================== */
.dads-description-list {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: grid;
  gap: 0.5rem 0;
  overflow-wrap: anywhere;
}
.dads-description-list dt {
  font-weight: 700;
}
.dads-description-list[data-marker="bullet"] dt {
  margin-left: 2rem;
  display: list-item;
  list-style-type: disc;
}
.dads-description-list[data-marker="custom"] dt > span:first-child {
  display: inline-block;
  min-width: 2rem;
}
.dads-description-list dd {
  margin-left: 2rem;
}

/* ===========================================================
   Divider (<hr>) — デジタル庁公式準拠
   サイト内既存の <hr> もデフォルトで適用 (色: gray-420 1px solid)
   =========================================================== */
main hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #949494;  /* gray-420 */
  opacity: 1;
}
main hr[data-color="solid-gray-536"] { border-top-color: #767676; }
main hr[data-color="black"] { border-top-color: #000000; }
main hr[data-style="dashed"] { border-top-style: dashed; }
main hr[data-width="2"] { border-top-width: 2px; }
main hr[data-width="3"] { border-top-width: 3px; }
main hr[data-width="4"] { border-top-width: 4px; }

/* ===========================================================
   Blockquote (<blockquote>) — デジタル庁公式準拠
   main 内の素の <blockquote> に自動適用。記事内の引用に使う。
   =========================================================== */
main blockquote {
  margin: 1rem 2.5rem;
  border-left: 8px solid #767676;  /* gray-536 */
  padding: 0.5rem 1rem 0.5rem 1.5rem;
}
main blockquote > *:first-child { margin-top: 0 !important; }
main blockquote > *:last-child { margin-bottom: 0 !important; }

/* ===========================================================
   List (<ul>, <ol>) — デジタル庁公式準拠
   main 内 article/section 配下のリストに自動適用。
   Tailwind の list-disc / list-decimal が無効化される副作用を避けるため
   .dads-list クラスにスコープ。
   =========================================================== */
.dads-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2rem;
  list-style-type: revert;
}
.dads-list > li {
  --li-spacing: 0;
  padding-top: var(--li-spacing);
  padding-bottom: var(--li-spacing);
}
.dads-list[data-spacing="4"] > li { --li-spacing: 0.25rem; }
.dads-list[data-spacing="8"] > li { --li-spacing: 0.5rem; }
.dads-list[data-spacing="12"] > li { --li-spacing: 0.75rem; }

/* ===========================================================
   highlight-box / faq-* 共通スタイル (記事内32ファイルで使用)
   旧 articles/show の Tailwind 子セレクタ定義を覆い、デジタル庁準拠の
   notification-banner 風 (color-chip info-1) に統一。

   .highlight-box           : 標準の強調枠 (青系 chip)
   .highlight-box--tip      : ヒント (灰系 info-2)
   .highlight-box--warning  : 警告 (黄系 warning)
   旧 inline style (linear-gradient + border-left) はそのまま残るが、
   このスタイルが上書きする (display 系のみ影響、色は inline 優先)
   =========================================================== */
main .highlight-box {
  display: block;
  border: 2px solid #00118f;  /* blue-1000 */
  border-radius: 0.5rem;
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  box-shadow: inset 0.5rem 0 0 0 #00118f;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.7;
}
main .highlight-box--tip {
  border-color: #767676;
  box-shadow: inset 0.5rem 0 0 0 #767676;
}
main .highlight-box--warning {
  border-color: #927200;
  box-shadow: inset 0.5rem 0 0 0 #ffc700;
}
main .highlight-box--success {
  border-color: #197a4b;
  box-shadow: inset 0.5rem 0 0 0 #197a4b;
}
main .highlight-box > *:first-child { margin-top: 0; }
main .highlight-box > *:last-child { margin-bottom: 0; }
main .highlight-box p + p { margin-top: 0.5em; }

/* .badge (articles/_case-studies 等のアンカーリンク用バッジ)
   .dads-chip-label と同等の見た目に統一 (デジタル庁準拠) */
main .badge,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
main .badge.bg-primary {
  background-color: #264af4;
  color: #ffffff;
}
main .badge.bg-secondary {
  background-color: #e8f1fe;
  color: #00118f;
  border-color: #264af4;
}

/* ===========================================================
   サイト全体の focus-visible 強化 (デジタル庁準拠)
   キーボードユーザーがナビ・フッター・カード型リンクなど any link を
   フォーカスしたとき、黄色ハイライト + 黒 4px アウトラインで明示する。
   :focus (マウスクリック時) は出さず、:focus-visible (キーボード時) のみ。
   =========================================================== */
header a:focus-visible,
footer a:focus-visible,
nav a:focus-visible,
.no-underline-link:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 2px;
  border-radius: 4px;
  background-color: #ffd43d;
  box-shadow: 0 0 0 2px #ffd43d;
}
/* SVG 内 a などには適用しない */
svg a:focus-visible { background-color: transparent; box-shadow: none; }

/* ===========================================================
   スキップリンク (WCAG 2.4.1 ブロックスキップ)
   普段は visually-hidden、Tab で focus されたとき初めて表示。
   キーボードユーザーがヘッダーをスキップしてメインに直接行ける。
   =========================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background-color: #00118f;
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
  z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  outline: 4px solid #ffd43d;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ===========================================================
   prefers-reduced-motion 対応 (WCAG 2.3.3 アニメーションからの解放)
   モーション低減を OS で設定しているユーザー向けに、
   transition / animation の duration を実質的に無効化する。
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   print stylesheet — 稟議書添付用に最適化
   - 黒/白で印刷、背景画像は印刷しない
   - リンク URL を本文末に表示 (紙でリンク先がわかるように)
   - ヘッダー/フッター/ナビ/スキップリンクは省略
   - ヒーロー背景画像は省略 (インクとカラー浪費を避ける)
   =========================================================== */
@media print {
  /* 基本: 白背景・黒文字 */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.6;
  }

  /* 印刷不要なエレメント */
  header,
  footer,
  nav,
  .skip-link,
  .dads-breadcrumb,
  [data-pref-clickable-map] > div[aria-hidden="true"],
  .prefecture-map-name-list,
  details > nav {
    display: none !important;
  }

  /* main は viewport いっぱい */
  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* リンクの URL を本文末に追加 (紙で参照できる) */
  main > section a:not(.no-underline-link)[href^="http"]::after,
  main > section a:not(.no-underline-link)[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    word-break: break-all;
  }

  /* 改ページ制御: 見出しの直後で改ページしない、表は分割しない */
  h1, h2, h3 { page-break-after: avoid; }
  table, blockquote, .highlight-box, .notification-banner {
    page-break-inside: avoid;
  }

  /* グラフ/地図の最大幅制御 (A4 縦想定) */
  main svg {
    max-width: 100%;
    height: auto;
  }

  /* ===== AI 診断レポート (/diagnose/:uuid) 印刷専用 ===== */
  /* dev only 根拠データセクションは絶対に印刷しない */
  details[open] > summary + div,
  .dev-only-section,
  [data-print="hide"] {
    display: none !important;
  }
  /* オレンジ強調カードは印刷で背景を消して枠線だけに (インク節約) */
  .bg-orange-50, .bg-orange-100, .bg-base-surface2 {
    background: #fff !important;
    border: 1px solid #999 !important;
  }
  /* 番号バッジは黒地白文字を維持 (識別性) */
  .bg-txt {
    background: #000 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* セクション間に改ページを許す (長いレポートが 1 ページに詰め込まれないように) */
  section[id^="section-"] {
    page-break-inside: auto;
  }
  /* 訂正フォームと進捗表示は印刷時に隠す (完成レポート時の表示は無関係) */
  form[action*="confirm"],
  .skip-link,
  [data-controller="editable-field"] [data-editable-field-target="editor"] {
    display: none !important;
  }
}

/* FAQ 関連 (旧 prose-news スタイルから救出して共通化) */
main .faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
main .faq-item {
  border: 1px solid #b3b3b3;
  border-radius: 0.5rem;
  overflow: hidden;
}
main .faq-question {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  background-color: #f2f2f2;
  padding: 0.75rem 1rem;
  margin: 0;
  border-bottom: 1px solid #b3b3b3;
}
main .faq-answer {
  padding: 1rem;
}

/* ===========================================================
   Link (.dads-link) — デジタル庁公式準拠
   .no-underline-link / カード型リンクには適用しない。
   サイト本文リンクは main > section a で既に常時下線済 (前述 a 規則)。
   ここでは visited 色 (magenta-900) と active 色 (orange-800) を追加。
   =========================================================== */
main > section a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]):visited {
  color: #8c1457;  /* magenta-900 相当 (公式準拠) */
}
main > section a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]):active {
  color: #c74700;  /* orange-800 */
  text-decoration-thickness: 1px;
}
main > section a:not(.no-underline-link):not([class*="bg-"]):not([class*="rounded"]):focus-visible {
  outline: 4px solid #000;
  outline-offset: 2px;
  border-radius: 4px;
  background-color: #ffd43d;
  box-shadow: 0 0 0 2px #ffd43d;
}

/* クリッカブル市町村マップ (build-prefecture-clickable-map.py で生成)
   設計: SVG 自体は白地黒線。大きい市町村は名前を地図中に表示、
   小さい自治体は地図下のリンク帯 (prefecture-map-name-list) で補う。
   地図 path と帯リンクは data-muni-code 経由で相互 hover ハイライト (.is-active) する。 */
.prefecture-clickable-map {
  width: 100%;
  height: auto;
  display: block;
}
.prefecture-clickable-map path[data-muni-code] {
  cursor: pointer;
  transition: fill 120ms ease;
}
.prefecture-clickable-map path[data-muni-code]:hover,
.prefecture-clickable-map path[data-muni-code].is-active {
  fill: #DBE7FB; /* primary-soft 相当 */
}
.prefecture-map-labels text {
  pointer-events: none;
  user-select: none;
}
.prefecture-map-name-list a.is-active {
  color: #3A73D8; /* primary 相当 */
  text-decoration: underline;
}

/* SDGs公式カラー */
.sdgs-1  { background-color: #e5243b; }
.sdgs-2  { background-color: #dda63a; }
.sdgs-3  { background-color: #4c9f38; }
.sdgs-4  { background-color: #c5192d; }
.sdgs-5  { background-color: #ff3a21; }
.sdgs-6  { background-color: #26bde2; }
.sdgs-7  { background-color: #fcc30b; }
.sdgs-8  { background-color: #a21942; }
.sdgs-9  { background-color: #fd6925; }
.sdgs-10 { background-color: #dd1367; }
.sdgs-11 { background-color: #fd9d24; }
.sdgs-12 { background-color: #bf8b2e; }
.sdgs-13 { background-color: #3f7e44; }
.sdgs-14 { background-color: #0a97d9; }
.sdgs-15 { background-color: #56c02b; }
.sdgs-16 { background-color: #00689d; }
.sdgs-17 { background-color: #19486a; }