/*
 * shobun-tool-v1.0.0.css
 * 行政処分検索ツールの見た目。**子テーマ（cocoon-child-master）に置く。**
 * 配置先: /wp-content/themes/cocoon-child-master/shobun-tool-v1.0.0.css
 *
 * すべて #shobun-tool の中だけに効かせる。テーマの他の部分に影響させない。
 */
#shobun-tool{
  --st-g900:#085041; --st-g700:#0F6E56; --st-g500:#1D9E75; --st-g100:#9FE1CB; --st-g050:#f0faf5;
  --st-ink:#333; --st-ink2:#555; --st-ink3:#888; --st-line:#e5e5e5;
  --st-warn:#B45309; --st-warnbg:#FFFBEB; --st-warnline:#FCD34D;
  max-width:760px;margin:0 auto;line-height:1.8;color:var(--st-ink);
}
#shobun-tool *{box-sizing:border-box}

#shobun-tool .st-hero{background:linear-gradient(160deg,var(--st-g900) 0%,var(--st-g500) 100%);
  border-radius:10px;padding:2.25rem 1.5rem;margin-bottom:1.5rem;text-align:center;color:#fff}
#shobun-tool .st-hero .st-eyebrow{font-size:13px;font-weight:600;color:var(--st-g100);letter-spacing:.15em;margin:0 0 .75rem}
#shobun-tool .st-hero .st-h1{font-size:23px;font-weight:700;margin:0 0 .75rem;line-height:1.5;color:#fff}
#shobun-tool .st-hero p{font-size:13.5px;color:#E1F5EE;margin:0}

#shobun-tool .st-box{background:#fff;border:1px solid var(--st-line);border-radius:10px;padding:1.25rem;
  margin-bottom:1rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
#shobun-tool .st-box label{display:block;font-size:13px;font-weight:600;color:var(--st-g700);margin-bottom:.5rem}
/* font-size:16px を下回るとiOSが勝手に拡大する。16px以上を保つこと */
#shobun-tool input[type=search]{width:100%;font-size:16px;padding:.75rem .9rem;border:2px solid var(--st-line);
  border-radius:8px;outline:none;font-family:inherit;background:#fff;color:var(--st-ink)}
#shobun-tool input[type=search]:focus{border-color:var(--st-g500)}
#shobun-tool .st-hint{font-size:12px;color:var(--st-ink3);margin:.6rem 0 0;line-height:1.7}
/* 都道府県ヒートマップ（2026-09-22 追加）。11列×17行のタイル配置。
   塗るのは**件数だけ**。種類では塗らない（東京都は免許取消が構造的に取得できないため、
   種類で塗ると誤った地域差を見せてしまう） */
#shobun-tool .st-map-wrap{background:#fff;border:1px solid var(--st-line);border-radius:10px;
  padding:1.1rem 1rem 1rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
#shobun-tool .st-map-title{font-size:13px;font-weight:600;color:var(--st-g700);margin:0 0 .75rem}
#shobun-tool .st-map-sub{font-size:11.5px;font-weight:400;color:var(--st-ink3);margin-left:.5rem}
/* 【2026-09-22】実物の日本地図SVGに差し替えた。タイル配置は手で座標を置くため
   2回作って2回とも形が違った。色は JS 側の MAP_COLORS で塗る（凡例と必ず同じ値になるように）。

   色について: 最初は緑の濃淡にしていたが、**緑は「良い・安全」を意味する。**
   行政処分の件数を緑で塗るのは意味が逆だった。
   かといって赤にすると「件数が多い県は危険」と読まれ、すぐ下の注記
   （件数は地域の会社の質を表さない）と矛盾する。
   → サイトに既にある警告色（アンバー）。褒めもせず、煽りもしない。
   0件はグレー（「安全」ではなく「記録が無い」）。 */
/* ブロック調のタイル。**角丸**にして「県のブロック」らしく見せる。
   色は JS の MAP_COLORS から直接当てる（凡例と必ず同じ値になる） */
/* **マスは横長にする。** 正方形だと「和歌山」「神奈川」「鹿児島」が入らず、
   「和歌」「神奈」のように切り詰めることになって読みにくい。
   11列 × 12行を 11:9 の枠に入れると、1マスあたり おおよそ 44×33px の横長になる。 */
/* 13列×13行。**枠に縦横比を持たせない。**
   比率で行の高さを決めると、スマホで1行が中身より小さくなり、はみ出して切れる
   （2026-09-22 に実際に起きた）。行は auto、高さは min-height で決める。 */
#shobun-tool .st-map{display:grid;gap:3px;max-width:540px;margin:0 auto;--st-cellh:31px;--st-gap:3px}
#shobun-tool .st-cell{border:0;border-radius:5px;padding:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  /* 縦に伸びるマスは行数ぶんの高さを確保する。その行に他の県がいないと縮んでしまうため */
  min-height:calc(var(--st-span,1) * var(--st-cellh) + (var(--st-span,1) - 1) * var(--st-gap));
  transition:transform .1s, box-shadow .1s; box-shadow:0 1px 0 rgba(0,0,0,.12)}
/* 縦横が同じマス数のものは正方形に（北海道）。行0-1には他の県がいないので、伸ばしても影響しない */
#shobun-tool .st-cell.st-sq{aspect-ratio:1}
#shobun-tool .st-cell:hover{transform:translateY(-1px) scale(1.06);z-index:2;
  box-shadow:0 3px 7px rgba(0,0,0,.2)}
#shobun-tool .st-cell-p{font-size:10.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
#shobun-tool .st-cell-p.st-long{font-size:9px;letter-spacing:-.06em}
#shobun-tool .st-cell-n{font-size:9.5px;opacity:.9;font-weight:600}
/* 選択中。地図が暖色なので、枠は緑（サイトの操作色）にして区別する */
#shobun-tool .st-cell.st-on{outline:3px solid var(--st-g500);outline-offset:1px;z-index:3;
  transform:scale(1.06)}
/* 狭い画面では**件数の数字を隠す**。25px幅のマスに数字を入れても読めないし、
   多い少ないは色で分かる。数字は押したときに下の行（st-map-sel）に出る。 */
@media(max-width:480px){
  #shobun-tool .st-map{gap:2px;--st-cellh:22px;--st-gap:2px}
  #shobun-tool .st-cell{border-radius:4px}
  #shobun-tool .st-cell-n{display:none}
  #shobun-tool .st-cell-p{font-size:8.5px}
  #shobun-tool .st-cell-p.st-long{font-size:7px;letter-spacing:-.08em}
  #shobun-tool .st-map-note{font-size:11px}
}
#shobun-tool .st-map-sel{text-align:center;font-size:13px;color:var(--st-ink2);margin:.6rem 0 0;min-height:1.4em}
#shobun-tool .st-map-clear{border:1px solid var(--st-line);background:#fff;border-radius:5px;
  font-size:11.5px;padding:.15rem .5rem;cursor:pointer;color:var(--st-ink3);font-family:inherit}
#shobun-tool .st-map-clear:hover{border-color:var(--st-g500);color:var(--st-g700)}
#shobun-tool .st-legend{display:flex;align-items:center;gap:.25rem;justify-content:center;
  margin:.9rem 0 0;font-size:10.5px;color:var(--st-ink3);flex-wrap:wrap}
#shobun-tool .st-legend .st-lg{width:14px;height:11px;border-radius:2px;display:inline-block;margin-left:.4rem}
#shobun-tool .st-map-note{font-size:11.5px;color:var(--st-ink3);line-height:1.75;margin:.8rem 0 0}

/* 処分理由の本文（2026-09-22 追加）。国交省の公表文がある237件で出る。
   閉じているときは1行、開くと全文。読ませたいので本文は少し大きめ・行間広め */
#shobun-tool .st-why{margin:.6rem 0 0;border-left:3px solid var(--st-g100);padding-left:.8rem}
#shobun-tool .st-why summary{font-size:13px;color:var(--st-ink2);cursor:pointer;line-height:1.7;
  list-style:none;padding:.15rem 0}
#shobun-tool .st-why summary::-webkit-details-marker{display:none}
#shobun-tool .st-why summary::before{content:"▸ ";color:var(--st-g500);font-weight:700}
#shobun-tool .st-why[open] summary::before{content:"▾ "}
#shobun-tool .st-why summary:hover{color:var(--st-g700)}
#shobun-tool .st-why-body{font-size:14px;line-height:1.95;color:var(--st-ink);margin:.6rem 0 .4rem;
  white-space:pre-wrap;word-break:break-word}
#shobun-tool .st-why-note{font-size:11.5px;color:var(--st-ink3);margin:0 0 .2rem}

#shobun-tool .st-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
#shobun-tool .st-filters select{font-size:13px;padding:.45rem .6rem;border:1px solid var(--st-line);
  border-radius:6px;font-family:inherit;color:var(--st-ink2);background:#fff;max-width:100%}

#shobun-tool .st-status{font-size:13px;color:var(--st-ink2);margin:0 0 .75rem;padding:0 .25rem}
#shobun-tool .st-status b{color:var(--st-g700)}

#shobun-tool .st-card{background:#fff;border:1px solid var(--st-line);border-radius:8px;padding:1rem 1.1rem;margin-bottom:.75rem}
#shobun-tool .st-card .st-name{font-size:16px;margin:0 0 .5rem;font-weight:700;color:var(--st-ink);line-height:1.5}
#shobun-tool .st-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:13px;color:var(--st-ink2);margin:0 0 .5rem}
#shobun-tool .st-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:.15rem .5rem;border-radius:4px;
  background:var(--st-g050);color:var(--st-g700);border:1px solid var(--st-g100);white-space:nowrap}
#shobun-tool .st-badge.st-stop{background:#FEF2F2;color:#991B1B;border-color:#FECACA}
#shobun-tool .st-badge.st-cancel{background:#F5F3FF;color:#5B21B6;border-color:#DDD6FE}
#shobun-tool .st-badge.st-old{background:var(--st-warnbg);color:var(--st-warn);border-color:var(--st-warnline)}
#shobun-tool .st-src{font-size:13px;color:var(--st-g500);text-decoration:none;font-weight:600}
#shobun-tool .st-src:hover{text-decoration:underline}

#shobun-tool .st-none{background:var(--st-g050);border:1px solid var(--st-g100);border-radius:8px;padding:1.25rem 1.35rem;margin-bottom:1rem}
#shobun-tool .st-none .st-name{font-size:16px;margin:0 0 .6rem;color:var(--st-g700);font-weight:700}
#shobun-tool .st-none p{font-size:13.5px;margin:0 0 .6rem;color:var(--st-ink2)}
#shobun-tool .st-none ul{font-size:13px;margin:.4rem 0 0;padding-left:1.2rem;color:var(--st-ink2)}
#shobun-tool .st-none li{margin-bottom:.3rem}

#shobun-tool .st-notice{background:var(--st-warnbg);border-left:4px solid var(--st-warnline);padding:.9rem 1.1rem;
  border-radius:0 6px 6px 0;font-size:13px;color:var(--st-ink2);margin:1rem 0}
#shobun-tool .st-notice b{color:var(--st-warn)}

#shobun-tool details.st-about{background:#fff;border:1px solid var(--st-line);border-radius:8px;padding:.9rem 1.1rem;margin-top:1.25rem}
#shobun-tool details.st-about summary{font-size:14px;font-weight:600;color:var(--st-g700);cursor:pointer}
#shobun-tool details.st-about p,#shobun-tool details.st-about li{font-size:13px;color:var(--st-ink2);margin:.5rem 0}
#shobun-tool details.st-about table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:.6rem}
#shobun-tool details.st-about th,#shobun-tool details.st-about td{border:1px solid var(--st-line);padding:.35rem .5rem;text-align:left}
#shobun-tool details.st-about th{background:#fafafa;font-weight:600;color:var(--st-ink2)}

#shobun-tool .st-foot{font-size:12px;color:var(--st-ink3);margin-top:1.25rem;text-align:center;line-height:1.9}
#shobun-tool .st-more{display:block;width:100%;padding:.7rem;font-size:14px;font-weight:600;color:var(--st-g700);
  background:#fff;border:1px solid var(--st-g100);border-radius:8px;cursor:pointer;font-family:inherit}
#shobun-tool .st-more:hover{background:var(--st-g050)}
#shobun-tool mark{background:#FEF08A;padding:0 1px;border-radius:2px;color:inherit}

@media (max-width:600px){
  #shobun-tool .st-hero{padding:1.75rem 1.1rem}
  #shobun-tool .st-hero .st-h1{font-size:20px}
  #shobun-tool .st-filters select{flex:1 1 100%}
}