/* リコール速報の style.css を元にした配色設計。色はすべて :root の変数で持つ。
   国のサイトと誤認させない: 紋章風の意匠、濃紺×金、官公庁風の配色は使わない。差し色は深緑1色。 */
:root {
  --color-bg: #FFFFFF;
  --color-bg-soft: #F6F8F7;
  --color-border: #E5E7EB;
  --color-text: #1F2933;
  --color-text-sub: #6B7280;
  --color-accent: #1F8A5B;
  --color-accent-hover: #166B46;
  --color-pill-active: #1F2933;
  --color-pill-active-text: #FFFFFF;
  --color-status-bg: #ECFDF5;
  --color-status-text: #065F46;
  --color-status-dot: #10B981;
  --tag-open-bg: #ECFDF5;  --tag-open-text: #065F46;
  --tag-soon-bg: #FFF7ED;  --tag-soon-text: #B45309;
  --tag-upcoming-bg: #EFF6FF; --tag-upcoming-text: #1D4ED8;
  --tag-closed-bg: #F3F4F6; --tag-closed-text: #6B7280;
  --tag-note-bg: #FEFCE8;  --tag-note-text: #854D0E;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--sans); font-size: 17px; line-height: 1.85; }
a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-accent); }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--color-bg); padding: 8px; z-index: 10; }

.site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--color-text); }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--color-accent); color: var(--color-pill-active-text); font-size: 1.05rem; line-height: 1; }
.logo-accent { color: var(--color-accent); }
.nav { display: flex; gap: 18px; margin-left: auto; overflow-x: auto; }
.nav a { color: var(--color-text); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { color: var(--color-accent); }
.header-search { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px solid var(--color-border); border-radius: 9999px; color: var(--color-text); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.header-search svg { width: 16px; height: 16px; }

main.wrap { padding-top: 32px; padding-bottom: 64px; }
.page-title { font-size: 1.9rem; line-height: 1.35; margin: 0 0 6px; font-weight: 700; }
.section-title { font-size: 1.25rem; margin: 44px 0 10px; font-weight: 700; }
.lede { color: var(--color-text-sub); margin: 0 0 20px; }
.empty { padding: 24px 0; color: var(--color-text-sub); }
.more { margin-top: 18px; }
.note { color: var(--color-text-sub); font-size: .9rem; }
.crumbs { margin: 0 0 6px; font-size: .9rem; color: var(--color-text-sub); }

.hero { text-align: center; padding: 20px 0 8px; }
.hero h1 { font-size: 2.3rem; line-height: 1.3; margin: 0 0 16px; font-weight: 700; }
.hero p { color: var(--color-text-sub); font-size: 1.1rem; max-width: 720px; margin: 0 auto 18px; line-height: 1.7; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9999px; background: var(--color-status-bg); color: var(--color-status-text); font-weight: 700; font-size: .95rem; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-status-dot); }

.search-form { margin: 14px 0 18px; }
.hero-search { max-width: 880px; margin: 26px auto 22px; }
.search-row { display: flex; border: 1px solid var(--color-border); border-radius: 9999px; background: var(--color-bg); overflow: hidden; }
.search-row:focus-within { border-color: var(--color-text-sub); }
.search-row input { flex: 1; min-width: 0; min-height: 56px; font: inherit; font-size: 1.05rem; padding: 10px 24px; border: 0; background: transparent; color: var(--color-text); outline: none; }
.search-row button { min-height: 56px; min-width: 110px; padding: 0 28px; }
button { font: inherit; font-weight: 700; padding: 9px 20px; border: 0; border-radius: 9999px; background: var(--color-accent); color: var(--color-pill-active-text); cursor: pointer; white-space: nowrap; }
button:hover { background: var(--color-accent-hover); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 14px; text-decoration: none; background: var(--color-bg-soft); }
.tile:hover { border-color: var(--color-accent); color: var(--color-text); }
.tile-label { font-weight: 700; }
.tile-count { font-size: .85rem; color: var(--color-text-sub); }

.pills { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 16px; border: 1px solid var(--color-border); border-radius: 9999px; background: var(--color-bg); color: var(--color-text); font-weight: 700; text-decoration: none; font-size: .95rem; }
.pill:hover { border-color: var(--color-accent); color: var(--color-text); }
.pill-count { font-weight: 400; font-size: .8rem; color: var(--color-text-sub); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.card > a:hover .card-title { text-decoration: underline; }
.card-body { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .8rem; }
.card-title { font-size: 1.08rem; line-height: 1.5; margin: 0; font-weight: 700; }
.card-summary { margin: 0; color: var(--color-text-sub); line-height: 1.7; font-size: .95rem; }
.card-amount { margin: 0; font-weight: 700; color: var(--color-accent); font-size: .98rem; }
.card-foot { margin: auto 0 0; padding-top: 8px; display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--color-text-sub); }
.card-deadline { font-weight: 700; color: var(--color-text); }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 9999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.tag-open { background: var(--tag-open-bg); color: var(--tag-open-text); }
.tag-soon { background: var(--tag-soon-bg); color: var(--tag-soon-text); }
.tag-upcoming { background: var(--tag-upcoming-bg); color: var(--tag-upcoming-text); }
.tag-closed { background: var(--tag-closed-bg); color: var(--tag-closed-text); }
.tag-suspended { background: var(--tag-soon-bg); color: var(--tag-soon-text); border: 1px solid var(--tag-soon-text); }
.suspended { margin-top: 28px; }
.suspended .plain li { margin: 6px 0; }
.tag-note { background: var(--tag-note-bg); color: var(--tag-note-text); }
.tag-cat { background: var(--color-bg); color: var(--color-text-sub); border: 1px solid var(--color-border); }

.ad { margin: 18px 0; }
.ad-empty { display: flex; align-items: center; justify-content: center; min-height: 90px; border: 1px dashed var(--color-border); color: var(--color-text-sub); font-size: .85rem; }
.auto-note { margin: 10px 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--color-bg-soft); border: 1px solid var(--color-border); color: var(--color-text-sub); font-size: .9rem; }

.letter { max-width: 760px; margin: 0 auto; }
.article-title { font-size: 1.7rem; line-height: 1.45; margin: 10px 0 18px; font-weight: 700; }
.lead { font-size: 1.14rem; line-height: 1.9; margin: 0; padding: 14px 0 14px 18px; border-left: 4px solid var(--color-accent); }
.update { font-size: .92rem; background: var(--tag-note-bg); color: var(--tag-note-text); padding: 8px 14px; border-radius: 10px; }
.letter section { margin-top: 34px; }
.letter h2 { font-size: 1.18rem; margin: 0 0 8px; font-weight: 700; }
.letter section > p { margin: 0 0 4px; white-space: pre-line; }
.amount { font-size: 1.2rem; font-weight: 700; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.facts dt { font-size: .82rem; color: var(--color-text-sub); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.faq div { margin-bottom: 12px; }
.faq dt { font-weight: 700; }
.faq dd { margin: 0; }
.sources { margin: 0; padding-left: 1.2em; }
.disclaimer { margin: 30px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--color-text-sub); font-size: .88rem; line-height: 1.75; }
.closed { margin-top: 28px; }
.closed summary { cursor: pointer; font-weight: 700; }
.plain { padding-left: 1.2em; }
.plain li { margin: 4px 0; font-size: .95rem; }

.result-title { margin-top: 6px; }
.nohit { margin-top: 10px; }
.nohit-text { font-weight: 700; margin: 0 0 10px; }
.nohit-tips { margin: 0; padding-left: 1.3em; }
.places { margin: 10px 0; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.15rem; margin: 26px 0 4px; font-weight: 700; }
.prose p { margin: 0 0 8px; }

.site-footer { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 30px 0 34px; font-size: .9rem; color: var(--color-text-sub); }
.site-footer a { color: var(--color-text-sub); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; }
.footer-grid p { margin: 0; }
.footer-grid .logo { font-size: 1.1rem; margin-bottom: 6px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 4px; }
.credit { margin-top: 20px; margin-bottom: 0; font-size: .8rem; }

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .header-row { flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; min-height: 0; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 14px; padding-bottom: 2px; }
  .header-search { margin-left: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  main.wrap { padding-top: 20px; }
  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: 1rem; }
  .search-row input { min-height: 52px; font-size: 1rem; padding: 10px 18px; }
  .search-row button { min-height: 52px; min-width: 84px; padding: 0 18px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .page-title { font-size: 1.6rem; }
  .article-title { font-size: 1.35rem; }
  .facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div { grid-column: 1 / -1; }
}