<style>
/* ▼汎用ボックス▼ */
.info-box {
  background-color: #EAF6EF;
  border: 1px solid #cfe5d7;
  border-radius: 6px;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}
.info-box p { margin: 0 0 0.8em; line-height: 1.7; }
.info-box ul { margin: 0.6em 0 0.8em 1.2em; padding: 0; }
.info-box a { color: #006c4f; text-decoration: underline; }

.hang { display: grid; grid-template-columns: 1em max-content 1fr; column-gap: .5em; margin: 0; }
.hang .label { grid-column: 2; white-space: nowrap; }
.hang .body { grid-column: 3; }

/* ▼農産物のテーブル▼ */
:root {
  --border: #c9d2e0;
  --head-bg: #528067;
  --head-fg: #ffffff;
  --hover:   #F3FCC0;
  --level-1: #F7FBF9;
  --level-2: #EAF6EF;
  --level-3: #D1EBDD;
  --w-first:  clamp(120px, 18vw, 160px);
  --w-second: clamp(110px, 16vw, 140px);
}

.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 0;
  background: white;
  box-shadow: none;
  position: relative;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1150px;
}

.col-fix-first  { width: var(--w-first); }
.col-fix-second { width: var(--w-second); }

thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--head-bg); color: var(--head-fg);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 8px 4px;
}

.head-merged { text-align: left; vertical-align: middle; }

th, td {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 8px 4px;
  vertical-align: middle;
  text-align: center;
  background: #fff;
  white-space: nowrap;
}
th:last-child, td:last-child { border-right: 1px solid var(--border); }
tr:last-child th, tr:last-child td { border-bottom: 1px solid var(--border); }

thead th.sticky-second, tbody th.sticky-second { border-left: none; }

.sticky-first {
  position: sticky; left: 0; z-index: 6;
  background: var(--head-bg); color: var(--head-fg);
  text-align: left; white-space: normal;
  overflow-wrap: anywhere; word-break: break-word;
  max-width: var(--w-first);
}
.sticky-second {
  position: sticky; left: var(--w-first); z-index: 6;
  background: var(--head-bg); color: var(--head-fg);
  text-align: left; white-space: normal;
  overflow-wrap: anywhere; word-break: break-word;
  max-width: var(--w-second);
}
.sticky-span {
  position: sticky; left: 0; z-index: 6;
  text-align: left;
  background: var(--head-bg); color: var(--head-fg);
  width: calc(var(--w-first) + var(--w-second));
  min-width: calc(var(--w-first) + var(--w-second));
  max-width: calc(var(--w-first) + var(--w-second));
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.sticky-first, .sticky-second, .sticky-span { background-clip: padding-box; }

.row-header, .row-sub { font-weight: 600; }

.col-item { width: var(--w-first); }
.col-sub  { width: var(--w-second); }

.col-count { width: 150px; min-width: 150px; max-width: 150px; }
.col-level { width: 480px; min-width: 480px; max-width: 480px; }

.col-exceed {
  min-width: 420px; text-align: left; white-space: normal;
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto; line-height: 1.6;
}

.level-1 { background: var(--level-1); }
.level-2 { background: var(--level-2); }
.level-3 { background: var(--level-3); }

tbody tr:hover td,
tbody tr:hover th.sticky-first,
tbody tr:hover th.sticky-second,
tbody tr:hover th.sticky-span { background: var(--hover); color: #1b1f24; }

tbody tr:has(+ tr:hover) th.sticky-first[rowspan] { background: var(--hover); color: #1b1f24; }

.num { font-variant-numeric: tabular-nums; }

/* ▼スマホ調整 */
@media (max-width: 640px) {
  :root {
    --w-first:  clamp(70px, 32vw, 110px);
    --w-second: clamp(65px, 30vw, 100px);
  }

  th.sticky-first, th.sticky-second, th.sticky-span {
    padding: 6px 4px; font-size: 13px; line-height: 1.3;
  }

  th, td { white-space: normal; }

  .col-exceed { min-width: 260px; }
  .col-level  { width: auto; min-width: 260px; max-width: none; }
  .col-count  { width: 100px; min-width: 80px; max-width: 120px; }

  table { min-width: 900px; }

  .sticky-second { left: var(--w-first); }
}

/* ▼部門別データのボタン▼ */
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch; 
}
@media (max-width: 900px) { .button-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .button-grid { grid-template-columns: 1fr; } }

a.image-button {
  display: flex;                  
  box-sizing: border-box;
  align-items: center;        
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
  padding-left: 24px;
  border-radius: 28px;
  overflow: hidden;               
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  min-height: 75px;   
  height: 75px;

  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity .25s ease, transform .06s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  a.image-button:hover { opacity: .9; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
}
a.image-button:active { transform: translateY(1px); }
a.image-button:focus-visible { outline: 3px solid #0044cc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.image-button { transition: none; } }

a.image-button img {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  margin-left: 4px;
  object-fit: contain;
  display: block;
}

.button-grid a.image-button:nth-of-type(6),
.button-grid a.image-button:nth-of-type(8) {
  align-items: center;  
}


.button-grid a.image-button:nth-of-type(6) .label,
.button-grid a.image-button:nth-of-type(8) .label {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;

  display: -webkit-box;
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical;
  line-height: 1.35;
}


.rice       { background-color: #fff2cc; color: #333; }
.wheat      { background-color: #d2b48c; color: #333; }
.beans      { background-color: #8b3a3a; color: #fff; }
.vegetables { background-color: #2E7D32; color: #fff; }
.fruits     { background-color: #f48fb1; color: #333; }
.local      { background-color: #d0d0d0; color: #222; }
.tea        { background-color: #b7e07a; color: #333; }
.mushrooms  { background-color: #e6e6fa; color: #333; }
.meat       { background-color: #F4A874; color: #333; }
.fish       { background-color: #AFF0F7; color: #333; }


.grid-spacer { display: block; visibility: hidden; }
</style>