/* 全ページ共通の見た目 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --main: #2e7d32;      /* テーマ色(緑) */
  --main-dark: #1b5e20;
  --bg: #f4f6f4;
  --text: #222;
  --border: #dcdcdc;
  --danger: #c62828;
}

body {
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* 上のバー */
header {
  background: var(--main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 52px;
}
header .app-title {
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 団体名の右に出す「（全体）」「（地区の名前）」。長い団体名が切れても、こちらは切らない */
header .app-scope {
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: -4px;
}
header .app-scope:empty {
  display: none;
}
header nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
}
header nav a.current {
  background: var(--main-dark);
  font-weight: bold;
}

.app-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

/* 狭い画面(スマホ)では、ヘッダーを「団体名」と「メニュー」の2段にする。
   1段のままだと、メニューは縮まない設定のため団体名が「…」に潰されて
   ほとんど読めなくなってしまう */
@media (max-width: 640px) {
  header {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px 4px;
  }
  .app-title-group {
    flex-basis: 100%; /* 1段目を団体名がまるごと使う */
  }
  header nav {
    flex-basis: 100%; /* 2段目をメニューがまるごと使う */
    justify-content: flex-end;
  }
  header nav a {
    padding: 6px 10px;
  }
  /* スズメは団体名の前(左)に置き、少し小さくして、
     下の画面へのはみ出しも控えめにする(2段目のメニューの文字に重ならないように)。
     ふだんの大きさの指定(.mascot.mascot-sm)より強くするため、headerも付けて書く */
  header .mascot.mascot-sm {
    order: -1; /* 並び順だけ入れ替える(HTMLでは団体名のあとに書いてある) */
    width: 44px;
    margin-bottom: -10px;
  }
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* ボタン
   押せるものだと分かるように、下に厚みの影をつけて立体にする。
   押すと沈む(影が薄くなって下へ動く)。
   灰色のボタンは、白地に黒い太字にして読みやすくする */
.btn {
  display: inline-block;
  border: 2px solid var(--main-dark);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background: linear-gradient(#43a047, #2e7d32);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 0 #134516, 0 6px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #134516, 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn.small {
  padding: 10px 14px; /* 指で押しやすい大きさを確保する */
  font-size: 14px;
}
.btn.gray {
  background: linear-gradient(#ffffff, #e4e4e4);
  color: #222;
  border-color: #8a8a8a;
  text-shadow: none;
  box-shadow: 0 4px 0 #8a8a8a, 0 6px 8px rgba(0, 0, 0, 0.16);
}
.btn.gray:active {
  box-shadow: 0 1px 0 #8a8a8a, 0 2px 3px rgba(0, 0, 0, 0.15);
}
.btn.red {
  background: linear-gradient(#e53935, #c62828);
  border-color: #8e1b1b;
  box-shadow: 0 4px 0 #6d1212, 0 6px 8px rgba(0, 0, 0, 0.22);
}
.btn.red:active {
  box-shadow: 0 1px 0 #6d1212, 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn:disabled {
  background: #e6e6e6;
  color: #757575;
  border-color: #c4c4c4;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* 入力欄 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
/* 日付・時間の欄は端末ごとの独自の見た目ではみ出すことがあるので抑える */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: 48px;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
/* チェックとレ点は、指で押しやすい大きさにそろえる */
input[type="checkbox"],
input[type="radio"] {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--main);
}
label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin: 14px 0 6px;
}

/* カード */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

/* お知らせメッセージ */
.message {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 14px;
  display: none;
}
.message.ok {
  display: block;
  background: #e8f5e9;
  color: var(--main-dark);
}
.message.error {
  display: block;
  background: #ffebee;
  color: var(--danger);
}
/* 文字を消したお知らせは、色のついた空の箱として残さない */
.message.ok:empty,
.message.error:empty {
  display: none;
}
.message.message-with-mascot {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* マップ上のポイント(絵文字のアイコン)
   .poi-hit は指で押せる範囲(44px四方の透明な枠)。中の .poi-icon が見えている丸 */
.poi-hit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.poi-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  /* 押されたときに、ヌルッと大きくなって元に戻るための下ごしらえ */
  transition: transform 0.25s ease;
}

/* イベントページの「マップで場所を見る」で来たときの目立たせ方 */
@keyframes poi-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}
@keyframes poi-flip {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}
.poi-focus-bounce .poi-icon {
  animation: poi-bounce 0.6s ease-in-out 3; /* ゆっくり3回はねる */
}
.poi-focus-flip .poi-icon {
  animation: poi-flip 0.3s linear 2; /* 速く縦に2回転 */
}

/* 集合場所を1回押したときに出る「Tap!」の吹き出し。
   もう1回押すと、その班の道順を 🚶 が歩き出す。
   説明の窓はアイコンの上に開くので、吹き出しは下に出してぶつからないようにする */
.poi-tap-hint {
  /* 吹き出しが隣の印の下に隠れないように、押した印だけ手前に出す
     (Leaflet が各印に直接 z-index を書き込むので、!important で上書きする) */
  z-index: 1000 !important;
}
/* 押されているあいだは、アイコンがヌルッとひとまわり大きくなる
   (押されないまま吹き出しが消えると、そのまま元の大きさに戻る) */
.poi-tap-hint .poi-icon {
  transform: scale(1.35);
}
.poi-tap-hint::after {
  content: "Tap!";
  position: absolute;
  /* 大きくなったアイコン(丸の下端が42pxあたり)の、すぐ下に出す */
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  background: #fff8e1;
  border: 1.5px solid #f0c36d;
  border-radius: 12px;
  color: #6b4c00;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  /* 吹き出しはタップを通す(2回目のタップの邪魔をしない) */
  pointer-events: none;
  animation: poi-tap-hint-shake 0.5s ease-in-out infinite;
}
/* 吹き出しの上のとんがり(アイコンを指している) */
.poi-tap-hint::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background: #fff8e1;
  border-left: 1.5px solid #f0c36d;
  border-top: 1.5px solid #f0c36d;
  transform: rotate(45deg);
  pointer-events: none;
}
/* ゆらゆら揺らして「押してね」と伝える */
@keyframes poi-tap-hint-shake {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50%      { transform: translateX(-50%) rotate(5deg); }
}
/* 動きを減らす設定にしている端末では、揺らさず・ヌルッとさせずに、出すだけにする */
@media (prefers-reduced-motion: reduce) {
  .poi-tap-hint::after { animation: none; }
  .poi-icon { transition: none; }
}

/* 登校班のルート選択バー */
.route-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 地区の絞り込みが増えても、狭い画面では2段に折り返す */
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.route-bar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 150px; /* ラベルと選択欄が離れて折り返さないようにする */
}
.route-bar select {
  flex: 1;
  max-width: 280px;
  padding: 8px;
  font-size: 14px;
}

/* ルートを歩く人 */
.walker-img {
  height: 36px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  /* 歩いているあいだ、左右に首を振る */
  transform-origin: 50% 90%;
  animation: walkerWaddle 0.7s ease-in-out infinite;
}
@keyframes walkerWaddle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
/* ゴールしたあとは、首振りをちょうど2回だけして止まる
   (名前を変えて別のアニメーションにすることで、最初からやり直させる) */
.walker-img.walker-goal {
  animation: walkerGoalWaddle 0.7s ease-in-out 2;
}
@keyframes walkerGoalWaddle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

/* 歩く人の吹き出し(迂回の期間中だけ、歩いているあいだ出る) */
/* 役員ページ: 班の道を歩く動きを見せているあいだは、ほかのアイコンを隠す(その班の集合場所と歩く人は残す) */
.route-playing .leaflet-marker-icon:not(.route-keep),
.route-playing .leaflet-marker-shadow {
  display: none !important;
}
.walker-wrap {
  position: relative;
  width: 36px;
  height: 36px;
}
.walker-bubble {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff8e1;
  border: 1.5px solid #f0c36d;
  color: #6b4c00;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  /* 吹き出しはタップを通す(下の地図やアイコンが触れなくならないように) */
  pointer-events: none;
}
/* 吹き出しの下のとんがり */
.walker-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff8e1;
  border-right: 1.5px solid #f0c36d;
  border-bottom: 1.5px solid #f0c36d;
  transform: rotate(45deg);
}
/* 🚧がゆらゆら、「迂回中」の文字が順番にぽんぽん跳ねる */
.walker-cone {
  display: inline-block;
  margin-right: 2px;
  animation: walker-cone-swing 0.9s ease-in-out infinite;
}
.walker-char {
  display: inline-block;
  animation: walker-char-pop 1.4s ease-in-out infinite;
}
@keyframes walker-cone-swing {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(14deg); }
}
@keyframes walker-char-pop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}
/* 動きを減らす設定にしている端末では、揺らさない */
@media (prefers-reduced-motion: reduce) {
  .walker-cone,
  .walker-char,
  .walker-img,
  .walker-img.walker-goal {
    animation: none;
  }
}

/* 一覧の行(資料・ポイント・イベントの管理用) */
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--text);
}
.doc-row .doc-title {
  font-size: 16px;
  font-weight: bold;
}
.doc-row .doc-date {
  font-size: 12px;
  color: #595959; /* 小さい文字でも読める濃さにする */
  margin-top: 4px;
}

/* 役員画面のタブ */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
/* 登録済みのルートの班名。押すと道順が動く(押せることが分かるように、カーソルを合わせたときに下線を出す。▶の印は 2026-10-05 に外した) */
.route-name-link {
  cursor: pointer;
}
.route-name-link:hover .doc-title {
  text-decoration: underline;
}
.tab-btn {
  border: 2px solid #8a8a8a;
  background: linear-gradient(#ffffff, #e4e4e4);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 0 #8a8a8a;
  transition: transform 0.05s, box-shadow 0.05s;
}
.tab-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #8a8a8a;
}
/* 選んでいるタブは、緑で塗って沈んだ形にする(色だけでなく形でも分かるように) */
.tab-btn.current {
  background: var(--main);
  border-color: var(--main-dark);
  color: #fff;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* イベントのカード */
.event-card .event-date {
  font-size: 14px;
  font-weight: bold;
  color: var(--main-dark);
}
.event-card .event-title {
  font-size: 18px;
  font-weight: bold;
  margin: 4px 0;
}
.event-card .event-place {
  font-size: 13px;
  color: #555;
}
.event-card .event-detail {
  font-size: 14px;
  margin-top: 8px;
  white-space: pre-wrap;
}

/* ルート線の色えらび */
.color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.color-choice {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.color-choice.selected {
  border-color: #222;
  transform: scale(1.12);
}

/* ルート一覧の色見本 */
.color-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
  margin-right: 6px;
}

/* 見出しタップで開閉するカード */
.collapsible .card-body {
  display: none;
}
.collapsible.open .card-body {
  display: block;
  margin-top: 12px;
}
.card-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.card-toggle .chev {
  font-size: 12px;
  color: #888;
  transition: transform 0.15s;
}
.collapsible.open .card-toggle .chev {
  transform: rotate(180deg);
}

/* 種類・登校班のドラッグ並び替え */
/* つまみは、押せるものだと分かるように、ボタンの形にする */
.type-row .drag-handle,
.route-group .drag-handle {
  cursor: grab;
  color: #333;
  font-size: 20px;
  line-height: 1;
  padding: 8px 10px;
  background: #f1f1f1;
  border: 2px solid #8a8a8a;
  border-radius: 8px;
  user-select: none;
  touch-action: none; /* 指でつかんだとき画面ごとスクロールしないように */
}
.type-row .drag-handle:hover,
.route-group .drag-handle:hover {
  background: #fff;
  border-color: #333;
}
/* つかんでいる行は、浮かせて太い点線で囲み、「動かしています」の札を付ける(色だけで知らせない) */
.type-row.dragging,
.route-group.dragging {
  position: relative;
  z-index: 5;
  border-radius: 12px;
  outline: 4px dashed #d84315;
  outline-offset: 2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  transform: scale(1.02);
}
.type-row.dragging::after,
.route-group.dragging::after {
  content: "↕ 動かしています(はなすと、ここに入ります)";
  position: absolute;
  top: -14px;
  right: 12px;
  padding: 3px 10px;
  background: #d84315;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.type-row.dragging .drag-handle,
.route-group.dragging .drag-handle {
  background: #d84315;
  border-color: #8a2a0c;
  color: #fff;
}
/* つかんでいるあいだは、どこにいても「つかんだ手」の矢印にして、文字が選ばれないようにする */
body.drag-sorting,
body.drag-sorting * {
  cursor: grabbing !important;
  user-select: none;
}

/* 画面の真ん中に浮かぶ窓(ポイントの登録・修正用) */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  overflow-y: auto;
  padding: 20px 16px;
}
.modal-backdrop.show {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.modal-card {
  width: 100%;
  max-width: 520px;
  margin: auto;
}

/* マーク(絵文字)の候補 */
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.emoji-choice {
  width: 46px;
  height: 46px;
  font-size: 22px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-choice.selected {
  border-color: var(--main);
  background: #e8f5e9;
}

/* 報告の件数バッジ */
.badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: bold;
  margin-left: 5px;
}

/* 表示するアイコンを選ぶ窓のチェック一覧 */
.icon-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  cursor: pointer;
}
/* 大きさは input[type="checkbox"] の共通の決まりにそろえてある */

/* ---------- 使いかたの案内(チュートリアル) ---------- */
/* 説明の間、うっかり画面を触ってしまわないように受け止める板 */
.tut-cover {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: transparent;
}
/* 説明したいところだけを明るく残し、まわりを暗くする */
.tut-hole {
  position: fixed;
  z-index: 4001;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
}
.tut-bubble {
  position: fixed;
  z-index: 4002;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.tut-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}
.tut-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.tut-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.tut-count {
  flex: 1;
  font-size: 12px;
  color: #767676;
}
@media (prefers-reduced-motion: reduce) {
  .tut-hole { transition: none; }
}
/* まだ何も登録されていないときに、案内のあいだだけ出る「見本」 */
.tut-sample {
  position: relative;
  border: 2px dashed #b0b0b0;
  border-radius: 12px;
  background: #fafafa;
  padding: 14px;
  margin-top: 10px;
}
.tut-sample-tag {
  position: absolute;
  top: -11px;
  left: 12px;
  background: #767676;
  color: #fff;
  font-size: 11px;
  border-radius: 6px;
  padding: 2px 8px;
}

/* 案内の吹き出し内で、スズメを左・説明文を右に並べる */
.tut-bubble-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tut-bubble-body {
  flex: 1;
  min-width: 0;
}
.tut-mascot-slot {
  display: none;
}
.tut-mascot-slot.has-mascot {
  display: block;
}

/* 長押しして「動かせる状態」になったポイント(役員ページ)。
   印の位置は地図の部品が transform で決めているので、中の絵だけを動かす */
.point-moving .poi-icon {
  animation: point-moving-pulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 5px #2e7d32);
}
@keyframes point-moving-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .point-moving .poi-icon { animation: none; }
}

/* 期限切れの印 */
.expired-badge {
  display: inline-block;
  background: #eee;
  color: #888;
  font-size: 11px;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
}

/* ---------- スズメの案内キャラクター ---------- */
.mascot {
  width: 108px;
  height: auto;
  display: block;
  animation: mascotPop .35s ease-out,
             mascotFloat 2.6s ease-in-out .35s infinite;
}
.mascot.mascot-sm {
  width: 64px;
  flex-shrink: 0;
  /* ヘッダー(高さ52px)より大きくして、下の画面側へ少しはみ出させる。
     マイナスの余白で「レイアウト上の高さ」を縮め、はみ出し分を下に逃がす */
  margin-bottom: -20px;
  position: relative;
  z-index: 1500; /* 地図の部品(〜1000)より手前、浮かぶ窓(2000〜)より奥 */
  pointer-events: none; /* 飾りなので、重なった下のボタンの操作を邪魔しない */
}
.mascot.mascot-md {
  width: 72px;
}
/* ヘッダーのスズメは画面の上端に近く、上下5pxのふわふわだと
   頭が画面の上にはみ出るため、上下2pxの控えめなふわふわにする */
header .mascot-sm {
  animation: mascotPop .35s ease-out,
             mascotFloatSm 2.6s ease-in-out .35s infinite;
}
/* とても狭い画面では、ヘッダーのスズメを隠して団体名の幅を確保する */
@media (max-width: 360px) {
  header .mascot-sm { display: none; }
}
@keyframes mascotPop {
  0%   { transform: translateY(14px) scale(.7); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes mascotFloatSm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* header .mascot-sm の指定は .mascot 単独より強いため、こちらにも並べて止める */
@media (prefers-reduced-motion: reduce) {
  .mascot,
  header .mascot-sm { animation: none; }
}

/* ---------- 班編成のタブ ---------- */
/* 班の見分けは「色だけ」にしない。班名の文字(１班・２班…)で見分ける */
.gangumi-row {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
}
/* まだ登録できていないものがある世帯・地区は、枠を黄色く太くする(中に「⚠️ ◯が未登録」の文字も出す) */
.gangumi-row.todo {
  border: 2px solid #e0a800;
  background: #fff8e1;
}
.btn.gray.gangumi-pick.todo {
  border-color: #c99400;
  background: linear-gradient(#fffbea, #ffecb3);
  box-shadow: 0 4px 0 #c99400, 0 6px 8px rgba(0, 0, 0, 0.16);
}
.btn.gray.gangumi-pick.todo:active {
  box-shadow: 0 1px 0 #c99400, 0 2px 3px rgba(0, 0, 0, 0.15);
}
.gangumi-todo-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: #6b4c00;
  white-space: nowrap;
}
.gangumi-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
}
.gangumi-row-sub {
  font-size: 13px;
  color: #595959;
  margin-top: 4px;
  line-height: 1.6;
}
.gangumi-row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gangumi-pick-head {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 18px;
}
.gangumi-tag {
  display: inline-block;
  border: 1px solid #bdbdbd;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
  background: #fafafa;
  white-space: nowrap;
}
/* 名簿の児童。1人1行で、学年と組・名前・ふりがな・班・役 の列をそろえる(札が増えても2段にしない) */
.gangumi-kid-lines {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.gangumi-kid-line {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content 4.2em;
  gap: 8px;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  background: #fafafa;
  white-space: nowrap;
}
/* 班未登録の子は役(班長・副班長)が付かないので、役の場所も「🏳 班未登録」の札に使う。
   こうしないと札が長いぶん、ふりがなの幅がせまくなって途中で切れる */
.gangumi-kid-line.free > .gangumi-tag {
  grid-column: 4 / 6;
  justify-self: start;
}
.gangumi-kid-line.free > .gangumi-kid-role {
  display: none;
}
.gangumi-kid-class {
  min-width: 4.2em;
}
.gangumi-kid-line .gangumi-kid-name {
  min-width: 4.6em;
}
/* ふりがなは、幅が足りないときだけ「…」で切る */
.gangumi-kid-kana {
  font-size: 13px;
  color: #595959;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gangumi-kid-role {
  text-align: right;
}
.gangumi-kids {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gangumi-kid {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  background: #fafafa;
}
.gangumi-kid .gangumi-row-sub {
  margin-top: 0;
}
/* 児童の並び(チェック欄を縦に並べる入れもの) */
.gangumi-member-rows {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.gangumi-member-rows.wide {
  /* 班未登録の児童は数が多いので、横にも並べる */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.gangumi-kid-grade {
  font-weight: bold;
}
.gangumi-kid-name,
.gangumi-kid-home {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gangumi-kid-home {
  font-size: 13px;
  color: #595959;
}
/* 班編成：地区の中の班の決め方(リスト／地図)の切りかえ */
.gangumi-mode-switch {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.gangumi-step-title {
  font-weight: bold;
  font-size: 15px;
  margin: 14px 0 6px;
}
.gangumi-route-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gangumi-route-pick {
  font-size: 15px;
  padding: 10px 14px;
}
/* 「① 班をえらぶ」のボタン。同じ幅のボタンをます目に並べ、中の ✔・名前・人数 も列をそろえる */
.gangumi-route-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190px);
  gap: 10px 8px;
}
.gangumi-route-table .gangumi-route-pick {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr) max-content;
  gap: 4px;
  align-items: center;
  text-align: left;
  white-space: nowrap;
  padding: 10px 12px;
}
.gangumi-route-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gangumi-route-count {
  text-align: right;
}
/* 名簿のチェック欄。チェック・学年・名前・世帯名・いまの班 の縦をそろえる */
.gangumi-check-row {
  display: grid;
  grid-template-columns: 22px 2.6em 6.5em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: normal;
  background: #fafafa;
  cursor: pointer;
  margin: 0;
}
.gangumi-check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}
/* この班に入っている児童は、太い緑の枠(チェックの印と合わせて、色だけに頼らない) */
.gangumi-check-row.on {
  border: 2px solid var(--main);
  background: #eef7ee;
}
/* 地図から選ぶ：なぞって囲んでいるあいだは、地図が動かないようにする */
.gangumi-lasso-on {
  cursor: crosshair !important;
  touch-action: none;
}
.gangumi-meet-pin {
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.gangumi-join-entry {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.gangumi-lasso-choose {
  margin: 10px 0;
  padding: 12px 14px;
  border: 2px solid #e0a800;
  border-radius: 10px;
  background: #fff8e1;
  font-size: 14px;
  color: #3b2f00;
}
/* 詳細設定の「どこの設定か」の下に出す説明(個別に設定している地区の名前もここに出す) */
.gangumi-rule-head {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 16px;
}
/* 「どこの設定か」とえらぶ欄を横に並べる(出す・隠すで並びが崩れないよう、ここで決める) */
.gangumi-rule-scope-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  font-size: 15px;
}
/* 1行のときは、左のえらぶ欄と同じ高さ(46px)になるようにして、行をそろえる */
.gangumi-rule-note {
  flex: 1;
  min-width: 260px;
  min-height: 46px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 14px;
  border: 2px solid #9e9e9e;
  border-radius: 10px;
  background: #fafafa;
  font-size: 14px;
  line-height: 24px;
}
.gangumi-rule-note.own {
  border: 2px dashed #6a1b9a;
  background: #f3e5f5;
}
/* 自宅の場所を決めるときの仮の📍(確かめているあいだ、大きく出す) */
.gangumi-place-pin {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.gangumi-meet-pin span {
  font-size: 12px;
  font-weight: bold;
  background: #fff;
  border: 2px solid #555;
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: 2px;
  vertical-align: middle;
}
.gangumi-home-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #9e9e9e;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* えらんでいる班に入っている自宅：太い緑の枠と✔ */
.gangumi-home-pin.in {
  border: 4px solid #1b5e20;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 14px;
  font-weight: bold;
}
/* ほかの班の自宅：細い枠と・ */
.gangumi-home-pin.other {
  border: 2px solid #616161;
  color: #424242;
  font-size: 16px;
  font-weight: bold;
}
.gangumi-group {
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  background: #fcfcfc;
}
.gangumi-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: bold;
}
.gangumi-warn {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: #6b4c00;
}
/* 登録状況：左に表、右の空きにグラフ(せまい画面では下に回る) */
.gangumi-status-wrap {
  display: flex;
  gap: 24px 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.gangumi-charts {
  display: flex;
  gap: 20px 36px;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 1 1 300px; /* 右の空きに入る。空きがせまければ、グラフ2つを縦に重ねる */
}
.gangumi-chart {
  min-width: 260px;
}
.gangumi-chart-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}
.gangumi-chart-body {
  display: flex;
  gap: 16px;
  align-items: center;
}
.gangumi-pie-label {
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}
.gangumi-pie-total {
  font-size: 20px;
  font-weight: bold;
  fill: #0b0b0b;
  text-anchor: middle;
}
.gangumi-pie-sub {
  font-size: 12px;
  fill: #52514e;
  text-anchor: middle;
}
.gangumi-chart-table {
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.gangumi-chart-table td {
  padding: 3px 0 3px 12px;
  text-align: right;
  color: #52514e;
  white-space: nowrap;
}
.gangumi-chart-table td:first-child {
  padding-left: 0;
  text-align: left;
  color: #0b0b0b;
}
.gangumi-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
/* 進みぐあいの横棒。うすい青の上を、こい青が左から伸びる */
.gangumi-meter {
  width: 280px;
  max-width: 100%;
  margin-bottom: 14px;
}
.gangumi-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}
.gangumi-meter-pct {
  font-size: 20px;
  margin-right: 6px;
}
.gangumi-meter-track {
  height: 12px;
  border-radius: 6px;
  background: #cde2fb;
  margin-top: 4px;
  overflow: hidden;
}
.gangumi-meter-fill {
  height: 100%;
  border-radius: 6px;
  background: #2a78d6;
}
/* 登録状況。番号・項目・ようす・「見る」の4列の表にして、①〜③と「気になるところ」の上下をそろえる */
.gangumi-status-grid {
  display: grid;
  grid-template-columns: 36px max-content minmax(0, max-content) max-content;
  align-items: stretch;
  font-size: 15px;
}
.gangumi-status-row {
  display: contents; /* 行の中身を、そのまま上の4列に並べる */
}
.gangumi-status-row > * {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid #eee;
  color: #444;
  line-height: 1.6;
}
.gangumi-status-row > .gangumi-status-label {
  font-weight: bold;
  color: #222;
  white-space: nowrap;
}
/* 気になるところの行は、線を引かずに少し詰める */
.gangumi-status-row.note > * {
  border-bottom: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 14px;
  color: #6b4c00;
}
.gangumi-status-row.note > .gangumi-status-label {
  color: #6b4c00;
}
/* 「見る」で連れて行った場所を、枠を2回光らせて知らせる */
@keyframes gangumi-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 67, 21, 0); }
  50% { box-shadow: 0 0 0 5px rgba(216, 67, 21, 0.85); }
}
.gangumi-flash {
  animation: gangumi-flash 0.9s ease-in-out 2;
}
.gangumi-ok {
  font-size: 13px;
  color: #1b5e20;
  margin-top: 8px;
}
.gangumi-kid-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gangumi-kid-row input[type="text"] {
  flex: 1;
  min-width: 120px;
  margin: 0;
}
.gangumi-kid-row select {
  margin: 0;
}
/* 登録状況の番号の丸 */
.gangumi-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  flex: none;
}
.gangumi-step-label {
  font-weight: bold;
  min-width: 9em;
}

/* 地図の自宅ピン。📌だけを置き、中身はカーソルを合わせたときに出す
   (900人ぶんの名前を全部出すと、文字が重なって読めなくなるため) */
.gangumi-map-pin {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* カーソルを合わせたときに出る内容 */
.gangumi-tip {
  font-size: 13px;
  line-height: 1.7;
}
.gangumi-tip-head {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2px;
}
.leaflet-tooltip {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #bdbdbd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 名簿の「町内をえらぶ」。19町内あっても一目で選べるように並べる。
   ボタンの幅は固定(世帯・児童が3桁「世帯 999件・児童 999人」でも1行に収まる幅) */
.gangumi-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 185px);
  gap: 8px;
  margin-top: 8px;
}
.gangumi-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 12px;
  line-height: 1.5;
}
/* 隊列(並び順)。児童1人が1枚のカード。つかんで上下に動かす */
.gangumi-line {
  display: grid;
  gap: 6px;
  max-width: 560px;
  margin-top: 8px;
}
.gangumi-line-card {
  display: grid;
  grid-template-columns: 20px 2.2em 2.6em 6.5em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 2px solid #8a8a8a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
  box-shadow: 0 3px 0 #8a8a8a;
  cursor: grab;
  user-select: none;
  touch-action: none; /* 指でつかんだとき、画面が一緒に動かないようにする */
}
.gangumi-line-card:active {
  cursor: grabbing;
}
.gangumi-line-grip {
  color: #757575;
  font-size: 18px;
  line-height: 1;
}
.gangumi-line-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}
/* ほかの地区が関わるところの札。紫の太枠と🤝＋地区名の文字で目立たせる(色だけに頼らない) */
.gangumi-guest-tag {
  display: inline-block;
  border: 2px solid #6a1b9a;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #4a148c;
  background: #f3e5f5;
  white-space: nowrap;
}
/* 班のまとめの中の「◯◯から◯人」 */
.gangumi-guest-box {
  margin-top: 8px;
  padding: 8px 10px;
  border: 2px solid #6a1b9a;
  border-radius: 8px;
  background: #faf2fc;
  font-size: 14px;
  color: #4a148c;
}
.gangumi-guest-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* 隊列のカード：他地区の子は紫の二重線の枠 */
.gangumi-line-card.guest {
  border: 4px double #6a1b9a;
  background: #faf2fc;
}
/* 役の札。班長は太い実線、副班長は点線(色だけで見分けない) */
.gangumi-role-tag {
  display: inline-block;
  border: 2px solid #1b5e20;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: bold;
  color: #1b5e20;
  background: #e8f5e9;
  white-space: nowrap;
}
.gangumi-role-tag.sub {
  border-style: dashed;
  background: #fff;
}
.gangumi-line-where {
  font-size: 13px;
  font-weight: bold;
  color: #1b5e20;
}
/* つかんでいるカードは、浮かせて点線にする(指やマウスについて動く) */
.gangumi-line-card.dragging {
  position: relative;
  z-index: 5;
  opacity: 0.9;
  border-style: dashed;
  border-color: #d84315;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: grabbing;
}
/* 落とす場所は、太い線で知らせる(カードの上か下か) */
.gangumi-line-card.drop-before {
  box-shadow: 0 -5px 0 #d84315, 0 3px 0 #8a8a8a;
}
.gangumi-line-card.drop-after {
  box-shadow: 0 8px 0 #d84315;
}
.gangumi-pick .gangumi-row-sub {
  margin-top: 0;
  white-space: nowrap;
}
/* 地区ボタンの中の注意書きは、長いと枠をはみ出すので折り返す(折り返すのは「、」のところだけ) */
.gangumi-pick .gangumi-todo-tag,
.gangumi-pick .gangumi-guest-tag {
  white-space: normal;
  max-width: 100%;
}
.gangumi-phrase {
  display: inline-block;
}

/* PC(横に広い画面)では、一覧を何列かに並べて横幅を使う。
   画面を広げるほど列が増える(auto-fill)ので、幅を決め打ちしない */
@media (min-width: 1024px) {
  .gangumi-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 10px;
    align-items: start;
  }
  .gangumi-list-grid > .gangumi-row,
  .gangumi-list-grid > .gangumi-group {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* 世帯の窓は地図が入るので、PCでは広めにする */
  #gangumi-household-modal .modal-card {
    max-width: 720px;
  }
  #gangumi-h-map {
    height: 340px;
  }
  /* 確かめる地図も、画面の高さに合わせて大きくする */
  #gangumi-map {
    height: min(70vh, 720px);
  }
}

/* ---------- 集計のタブ(紙に出す表・ルート図) ---------- */
/* 紙の大きさの札(見出しの横) */
.shukei-paper {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border: 2px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  white-space: nowrap;
}
.shukei-lead {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}
/* えらぶ欄とボタンを横に並べる(せまい画面では縦に回る) */
.shukei-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.shukei-pick > div {
  flex: 0 1 220px;
}
/* 開くボタンを左に、えらぶ欄をその右に並べる */
.shukei-pick > .btn {
  order: -1;
}
.shukei-pick select {
  width: 100%;
}
/* 紙を見る窓 */
.shukei-modal-card {
  max-width: 1000px;
}
/* 保存・印刷・閉じるは、紙を下まで見ていても上に残す */
.shukei-bar {
  position: sticky;
  top: -20px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  background: #fff;
  border-bottom: 2px solid var(--border);
}
.shukei-bar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#shukei-pages {
  margin-top: 12px;
  padding: 16px;
  background: #8a8a8a;
  border-radius: 8px;
}
.shukei-page {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.shukei-page.wide {
  max-width: 100%;
}
.shukei-page:last-child {
  margin-bottom: 0;
}
/* 「地区・班ごと」の「地区・」。1つの地区でログインしている人には出さない(shukei.js が出し分ける) */
.shukei-area-word {
  white-space: nowrap;
}

/* ---------- 世帯と児童の登録(スマホ・household.js) ---------- */
#household-map {
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
}
/* 自宅の場所の印(📍)。丸い台は付けず、絵だけを置く */
.household-pin {
  width: 34px;
  height: 34px;
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.household-kid {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.household-kid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.household-kid-class {
  display: flex;
  gap: 8px;
}
.household-rep-box {
  margin-top: 4px;
  padding: 10px 12px;
  background: #f4f7fb;
  border: 2px solid #1c5cab;
  border-radius: 10px;
  font-size: 15px;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}
.household-rep-pass {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
}

/* ---------- スマホの画面の上の帯(マップ・イベント) ---------- */
/* メニューは下のバーに移したので、上は「スズメ＋団体名」の1段だけ。
   スズメの上下のまん中に、団体名の文字のまん中をそろえる */
header.phone-header {
  height: auto;
  padding: 6px 12px;
  flex-wrap: nowrap;
  /* イベントの画面をスクロールしても、上の帯(団体名)は画面の上に残す(2026-10-23) */
  position: sticky;
  top: 0;
  z-index: 1100; /* 中身(地図の見本など)より手前、メニュー(1200)・浮かぶ窓(2000〜)より奥 */
}
header.phone-header .app-title-group {
  align-items: center;
  cursor: pointer; /* タップすると読み込み直す(menubar.js) */
  -webkit-tap-highlight-color: transparent;
}
header.phone-header .app-title-group:active {
  opacity: 0.6; /* 押したことが分かるように、押している間だけ薄くする */
}
header.phone-header .mascot.mascot-sm {
  order: -1;        /* スズメを団体名の左に置く */
  width: 44px;
  margin-bottom: 0; /* 下へはみ出させない(はみ出すと、まん中がずれて見える) */
}
header.phone-header .app-title {
  line-height: 1.2;
}

/* ---------- 画面の下のメニューバー(menubar.js) ---------- */
#menu-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200; /* 地図のボタン(1100)より手前、浮かぶ窓(2000〜)より奥 */
  background: #fff;
  border-top: 3px solid var(--main-dark);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.3s ease;
}
/* しまうと、バーは画面の下へすべり落ち、つまみだけが画面の下の端に残る */
#menu-bar.closed {
  transform: translateY(100%);
}
#menu-bar.no-anim,
#menu-bar.no-anim #menu-bar-handle {
  transition: none;
}
/* バーの左上に付いた耳(出し入れのつまみ)。
   バーの上の線(3px)にかぶせず、線の上に乗せる(しまっているときは、線で切れて見える) */
#menu-bar-tabs {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 3px);
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
#menu-bar-handle {
  /* 印(▼)と文字は、たての真ん中でそろえて横に並べる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  min-width: 112px;
  height: 38px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid var(--main-dark);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.25);
  /* 影は、上と左右にだけ出す。下にもはみ出すと、バーの白い地の上に灰色の帯が落ちて、
     耳とバーのあいだに線があるように見える */
  clip-path: inset(-14px -14px 0 -14px);
  cursor: pointer;
  /* しまっているときは、こい緑の地に白い文字。下にはバーの緑の線が通る */
  color: #fff;
  background: var(--main-dark);
}
/* メニューを出している間は、バーと同じ白い地にして、下の線も消してバーとひと続きにする。
   色だけでなく、「線で切れているか・つながっているか」の形でも見分けがつく */
#menu-bar:not(.closed) #menu-bar-handle {
  /* 線(3px)より1px深く下へのばして、線をかくす。ぴったり3pxだと、耳の下の端が画素の途中に来たとき、
     線の下の端がにじんで、耳とバーのあいだに薄い線が残る(2026-10-23) */
  height: 42px;
  margin-bottom: -4px;
  padding-bottom: 4px; /* 文字の高さは、しまっているときとそろえる */
  position: relative;
  color: var(--main-dark);
  background: #fff;
}
/* のばした1pxのぶん、左右の緑の縁も線より下へはみ出すので、そこだけ白でかくす */
#menu-bar:not(.closed) #menu-bar-handle::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 1px;
  background: #fff;
}
#menu-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  color: var(--main-dark);
  text-decoration: none;
  background: linear-gradient(#ffffff, #e8f0e8);
  border: 2px solid var(--main-dark);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--main-dark);
  cursor: pointer;
}
.menu-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--main-dark);
}
.menu-btn-icon {
  font-size: 24px;
  line-height: 1.1;
}
/* いま開いているページ(と、場所をえらんでいる最中の「報告」)。色だけでなく、へこんだ形と下線でも示す */
.menu-btn.current {
  background: var(--main);
  color: #fff;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.menu-btn.current .menu-btn-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 下のメニューのボタンの置き場所は、立場や連携の有無で変えない(2026-10-24)。
   出ていないボタンのぶんを前に詰めると、連携していない人では「設定」が左下に来るなど、場所が変わって迷うため。
   出ていないボタンの場所は、空いたままにする。
     1段目:マップ／登校班(地域の方は見守り当番、連携していない人は初期連携)／イベント
     2段目:報告／トピック／設定(世帯を登録する前の保護者は退室) */
#menu-bar-grid #nav-map { grid-area: 1 / 1; }
#menu-bar-grid #notice-btn,
#menu-bar-grid #duty-btn,
#menu-bar-grid #start-link-btn { grid-area: 1 / 2; }
#menu-bar-grid #nav-events { grid-area: 1 / 3; }
#menu-bar-grid #report-btn,
#menu-bar-grid #nav-report { grid-area: 2 / 1; }
#menu-bar-grid #nav-topics { grid-area: 2 / 2; }
#menu-bar-grid #settings-open-btn,
#menu-bar-grid #nav-settings { grid-area: 2 / 3; }
/* 設定の窓(下のメニューの「設定」)の中のボタン。下のメニューと同じ形で、3つ横に並べる */
.settings-pop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.settings-pop .menu-btn {
  font-size: 14px;
  white-space: nowrap; /* 「表示アイコン」が「表示アイコ/ン」と折れないように */
  padding-left: 2px;
  padding-right: 2px;
}
/* 地図の下の部品も、メニューに隠れないよう上へよける。
   マップの画面の大きい地図(#map)だけ。窓の中の小さい地図(世帯登録など)は動かさない */
#map .leaflet-bottom {
  bottom: var(--menu-bar-h, 0px);
  transition: bottom 0.3s ease;
}
/* 地図の出どころ(OpenStreetMap)の表示は、右上に小さく置く(2026-10-23。index.html の setPosition) */
#map .leaflet-top.leaflet-right .leaflet-control-attribution {
  margin: 0;
  border-bottom-left-radius: 6px;
}
/* 現在地のボタン(地図の右下。2026-10-23 に下のメニューから移した)。
   メニューが出ている間は、その上へよける(--menu-bar-h は menubar.js が入れる) */
.map-locate-btn {
  position: absolute;
  right: 12px;
  bottom: calc(var(--menu-bar-h, 0px) + 14px);
  z-index: 800; /* 地図(Leaflet の部品は 400〜1000)の上、メニュー(#menu-bar)の下 */
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  font-family: inherit;
  font-weight: bold;
  color: var(--main-dark);
  background: #fff;
  border: 2px solid var(--main-dark);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: bottom 0.3s ease;
}
.map-locate-btn:active {
  transform: translateY(2px);
}
.map-locate-icon {
  font-size: 26px;
  line-height: 1.1;
}
.map-locate-label {
  font-size: 11px;
}
/* イベントの画面は、いちばん下の中身がメニューに隠れないよう、下を空けておく */
#menu-bar ~ main {
  padding-bottom: calc(var(--menu-bar-h, 0px) + 56px);
}
@media (prefers-reduced-motion: reduce) {
  #menu-bar,
  #map .leaflet-bottom,
  .map-locate-btn {
    transition: none;
  }
}

/* ---------- 切り替えスイッチ(イベントの画面「表示するイベント」) ---------- */
/* 色だけに頼らない：つまみの位置(右＝表示)と、横の「表示」「かくす」の文字でも分かるようにする */
.toggle-group {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 12px;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px; /* 指で押しやすい高さ */
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.toggle-name {
  flex: 1;
  min-width: 0;
}
/* 本物のチェックは見えなくして、キーボードや読み上げではそのまま使えるようにしておく */
.toggle-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #777;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #777;
  transition: transform 0.2s ease, background 0.2s ease;
}
.toggle-row input:checked + .toggle-switch {
  background: var(--main);
  border-color: var(--main-dark);
}
.toggle-row input:checked + .toggle-switch::after {
  transform: translateX(22px);
  background: #fff;
}
.toggle-row input:focus-visible + .toggle-switch {
  outline: 3px solid #1c5cab;
  outline-offset: 2px;
}
.toggle-state {
  flex-shrink: 0;
  width: 3.2em;
  font-size: 13px;
  font-weight: bold;
  color: #595959;
}
.toggle-row input:checked ~ .toggle-state {
  color: var(--main-dark);
}
/* 種類の下に出る、地区の選択窓 */
.toggle-sub {
  margin: 0 0 8px;
  padding: 6px 10px 10px 12px;
  background: #f4f6f4;
  border-left: 4px solid var(--main-dark);
  border-radius: 0 8px 8px 0;
}
.toggle-sub-lead {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: normal;
  color: #595959;
}
@media (prefers-reduced-motion: reduce) {
  .toggle-switch,
  .toggle-switch::after {
    transition: none;
  }
}

/* ---------- 開け閉めする見出し(イベントの画面「表示イベント」) ---------- */
.accordion-head {
  width: 100%;
  min-height: 44px;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
}
.accordion-head .chev {
  font-size: 16px;
  color: var(--main-dark);
}

/* 学校行事の対象(学校全体・学年)のチェック。指で押しやすい大きさにして、3つずつ並べる */
.toggle-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.toggle-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  font-weight: normal;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.toggle-checks label:first-child {
  grid-column: 1 / -1; /* 「学校全体」は1段まるごと使う */
}
.toggle-checks input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* 押せないボタン(世帯を登録していない人の「報告」、連携する前の「世帯登録」)。
   色を反転させ(こい灰色の地に白い文字)、点線の枠と平らな形でも「押せない」と分かるようにする */
/* 世帯を登録するまで使えないボタン(イベント・トピック・報告・連絡)。薄くして、枠を点線にする。
   押すことはできて、押すと登録の窓が出る(household.js) */
.menu-btn.menu-btn-wait {
  opacity: 0.45;
  border-style: dashed;
  box-shadow: none;
}
.menu-btn.disabled {
  color: #fff;
  background: #6f6f6f;
  border: 2px dashed #d0d0d0;
  box-shadow: none;
}
.menu-btn.disabled .menu-btn-icon {
  opacity: 0.6;
  filter: grayscale(1);
}
.menu-btn.disabled:active {
  transform: none;
}
/* 連携していない人の「イベント」「報告」(2026-10-24)。見た目は上の disabled と同じ。
   押すと、先に初期連携をするよう案内を出す(index.html) */

/* ---------- 登校班への連絡の窓(notice.js) ---------- */
.notice-lead {
  margin-top: 14px;
  font-size: 14px;
  font-weight: bold;
}
/* きょうだいの名前。えらんだ子は、色に加えて ✔ と太い枠で示す */
.notice-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.notice-kid {
  min-height: 48px;
  padding: 8px 14px 8px 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background: #fff;
  border: 2px solid #999;
  border-radius: 10px;
  cursor: pointer;
}
.notice-kid.on {
  color: var(--main-dark);
  background: #e8f5e9;
  border: 3px solid var(--main-dark);
}
.notice-kid-mark {
  display: inline-block;
  width: 1.4em;
  text-align: center;
}
/* 内容の3つのボタンは、たてに大きく並べる */
.notice-kinds {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.notice-kind {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  font-size: 18px;
  text-align: left;
}
.notice-kind-icon {
  font-size: 24px;
  margin-right: 6px;
}
/* 送る前の確かめ・届いた連絡の1件ぶん */
.notice-card {
  margin: 12px 0;
  padding: 12px 14px;
  background: #f4f7fb;
  border: 2px solid #1c5cab;
  border-radius: 12px;
}
.notice-card-name {
  font-size: 17px;
  font-weight: bold;
}
.notice-card-text {
  margin-top: 4px;
  font-size: 20px;
  font-weight: bold;
}
.notice-card-time {
  margin-top: 4px;
  font-size: 12px;
  color: #595959;
}

/* 送ったあとに数秒だけ出る、短いお知らせ */
#notice-toast {
  display: none;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2500;
  width: max-content; /* 文字が途中で折れないよう、中身の幅に合わせる(画面の9割まで) */
  max-width: 90%;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: bold;
  color: #1b5e20;
  background: #e8f5e9;
  border: 2px solid #1b5e20;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}
#notice-toast.show {
  display: block;
}


/* ---------- 自分の子の登校班の隊列(設定 → 登校班。household.js) ---------- */
.household-route {
  margin-top: 12px;
}
.household-route + .household-route {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.household-route-name {
  font-size: 17px;
  font-weight: bold;
}
.household-route-note {
  font-size: 13px;
  color: #595959;
  line-height: 1.7;
  margin: 6px 0;
}
.household-route-line {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.household-route-line li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
/* 自分の子の行。色だけでなく、太い枠と太い文字でも示す */
.household-route-line li.mine {
  background: #e8f5e9;
  border: 2px solid var(--main-dark);
  border-radius: 8px;
  font-weight: bold;
}
.household-route-no {
  flex-shrink: 0;
  width: 1.8em;
  text-align: center;
  font-weight: bold;
  color: #595959;
}
.household-route-kid {
  flex: 1;
  min-width: 0;
}
.household-route-kid small {
  margin-left: 6px;
  font-size: 13px;
  font-weight: normal;
  color: #595959;
}
.household-route-tag {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  border: 1px solid #777;
  border-radius: 999px;
  background: #fff;
}

/* メニューのボタンの、自前で描いた絵(非常口のマーク)。絵文字と同じ大きさにそろえる */
.menu-btn-svg {
  display: block;
  width: 32px;
  height: 26px;
}
/* あまり押してほしくないボタン(退室)。ほかより薄くして目立たせない。
   「押せない」ボタン(点線の枠)とは違い、細い実線の枠のままにして、押せることは分かるようにする */
.menu-btn.menu-btn-quiet {
  color: #8a8a8a;
  font-weight: normal;
  background: #fafafa;
  border: 1px solid #c4c4c4;
  box-shadow: none;
}
.menu-btn.menu-btn-quiet .menu-btn-icon {
  opacity: 0.4;
}

/* ---------- 透かし(だれが見ているか。categories.js の setWatermark) ---------- */
.watermark-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none; /* 下のボタンや文字は、そのまま押せる・選べる */
  background-repeat: repeat;
}
/* 役員ページの名簿・集計のぶん。画面には出さない(2026-10-07 にやめた。文字が読みにくくなるため)。
   画面をそのまま印刷したとき(Ctrl+P)だけ、紙に出る(下の @media print) */
.watermark-layer.watermark-screen {
  display: none;
  position: fixed;
  z-index: 4000;
}
/* 透かしを敷く窓は、はみ出さないようにしておく */
#route-view-modal .modal-card {
  position: relative;
  overflow: hidden;
}

/* 姓と名を、横に並べて入れる欄(世帯登録・役員ページの名前の登録) */
.household-name-pair {
  display: flex;
  gap: 8px;
}
.household-name-pair input {
  flex: 1;
  min-width: 0;
}

/* 画面をそのまま印刷したとき(Ctrl+P)にも、透かしが紙に出るようにする。
   ブラウザは、ふつうは背景を印刷しない。ここで「背景もそのまま刷る」と指定しておく */
@media print {
  .watermark-layer {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- 班編成のタブ：見るだけの人(受け持ちの学年・クラスが決まっているPC利用者) ----------
   直すためのカードやボタンを出さない。守りはサーバー側にある(直す窓口は断られる)。ここは迷わせないためだけ */
.gangumi-readonly #gangumi-plan-card,
.gangumi-readonly #gangumi-promote-card,
.gangumi-readonly #gangumi-detail-card,
.gangumi-readonly #gangumi-add-household-btn,
.gangumi-readonly .gangumi-row-btns,
.gangumi-readonly #gangumi-roster-empty,
.gangumi-readonly #gangumi-status [data-go="free"],
.gangumi-readonly #gangumi-status [data-go="line"],
.gangumi-readonly #gangumi-status [data-go="note"],
.gangumi-readonly #gangumi-status [data-go="add"] {
  display: none !important;
}

/* ---------- 班編成のタブ：レベルで決まる出し分け(守りはサーバー側。ここは、押せないものを出さないため) ---------- */
/* 名簿が「見るだけ」：世帯の登録・修正・場所のボタンと、詳細設定を出さない */
.gangumi-roster-view #gangumi-add-household-btn,
.gangumi-roster-view .gangumi-row-btns,
.gangumi-roster-view #gangumi-roster-empty,
.gangumi-roster-view #gangumi-status [data-go="add"],
/* 班・隊列を「出さない」：班編成のカードと、そこへ行くボタンを出さない */
.gangumi-teams-none #gangumi-plan-card,
.gangumi-teams-none #gangumi-status [data-go="free"],
.gangumi-teams-none #gangumi-status [data-go="line"],
.gangumi-teams-none #gangumi-status [data-go="note"],
/* 班・隊列が「見るだけ」：案を作る・戻す・囲んで選ぶ、のボタンを出さない(ほかの操作は gangumi.js が止める) */
.gangumi-teams-view #gangumi-draft-btn,
.gangumi-teams-view #gangumi-reset-btn,
.gangumi-teams-view #gangumi-lasso-btn,
.gangumi-teams-view [data-join-open] {
  display: none !important;
}
/* 登校班ルート・イベントが「見るだけ」：登録・編集・削除・並べかえを出さない(admin.html が view-only を付ける) */
#page-routes.view-only #route-add-btn,
#page-routes.view-only #route-list button,
#page-routes.view-only #route-order-hint,
#page-routes.view-only .drag-handle,
#page-events.view-only #event-form-card,
#page-events.view-only #event-list button {
  display: none !important;
}
/* 集計が「画面で見るだけ」：保存・印刷のボタンを出さない */
body.shukei-view-only #shukei-save-btn,
body.shukei-view-only #shukei-print-btn {
  display: none !important;
}

/* 設定のタブの見出し(関連する項目をまとめる)。番号と文字で区切る(色だけに頼らない) */
.settings-group {
  margin: 22px 4px 8px;
  padding-bottom: 4px;
  font-size: 17px;
  border-bottom: 3px solid #2e7d32;
}
.settings-group:first-child {
  margin-top: 4px;
}
.settings-group-sub {
  margin-left: 12px;
  font-size: 13px;
  font-weight: normal;
  color: #595959;
}

/* 運営とのやりとり(⚙設定)。左に一覧、右に読む欄。せまい画面では、たてに並ぶ */
.mail-panes {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: flex-start;
}
.mail-list {
  flex: 0 0 340px;
  max-width: 100%;
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid #bdbdbd;
  border-radius: 10px;
  background: #fff;
}
.mail-view {
  flex: 1;
  min-width: 0;
  border: 1px solid #bdbdbd;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  min-height: 160px;
}
.mail-empty {
  font-size: 14px;
  color: #595959;
  padding: 12px;
  margin: 0;
}
/* 一覧の1件。押すと右に中身が出る。いま開いているものは太い枠、まだ読んでいないものは太字と「● 未読」 */
.mail-row {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #ddd;
  border-left: 5px solid transparent;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
}
.mail-row:hover {
  background: #f3f7fc;
}
.mail-row.open {
  border-left-color: #1c5cab;
  background: #e8f1fb;
}
.mail-row.unread .mail-subject {
  font-weight: bold;
}
.mail-row-top {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: #444;
}
.mail-date {
  margin-left: auto;
  white-space: nowrap;
}
.mail-subject {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-new {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #8a1c1c;
  border: 1px solid #8a1c1c;
  border-radius: 999px;
  padding: 0 8px;
  background: #fff;
  white-space: nowrap;
}
.mail-view-subject {
  font-size: 18px;
  font-weight: bold;
}
.mail-view-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: #444;
  margin-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}
.mail-view-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.8;
  margin-top: 10px;
}
.mail-file {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #777;
  border-radius: 10px;
  background: #fafafa;
}
.mail-file-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.mail-compose {
  margin-top: 12px;
  padding: 12px 14px;
  border: 2px solid #2e7d32;
  border-radius: 10px;
  background: #f6fbf6;
}
@media (max-width: 800px) {
  .mail-panes {
    flex-direction: column;
  }
  .mail-list {
    flex-basis: auto;
    width: 100%;
    max-height: 300px;
  }
  .mail-view {
    width: 100%;
  }
}

/* 地区の代表の入り口：タブレット・パソコンで読むQRコード(白い余白を付けて、暗い所でも読めるように) */
.household-rep-qr {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
}
.household-rep-qr img, .household-rep-qr canvas { display: block; }

/* PC利用者の名簿：まだパスワードを決めていない人に渡す「専用のURL」と「はじめてのコード」 */
.gangumi-first-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 2px dashed #8a6d00;
  border-radius: 8px;
  background: #fffbe6;
  font-size: 13px;
  line-height: 1.7;
}
.gangumi-first-code {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* スマホの幅(地区の代表が、スマホで班編成を開いたとき)：登録状況は、項目と「見る」を上に、ようすを下の段に並べる */
@media (max-width: 560px) {
  .gangumi-status-grid { display: block; }
  .gangumi-status-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
  }
  .gangumi-status-row.note { border-bottom: 0; padding: 2px 0; }
  .gangumi-status-row > * { border-bottom: 0; padding: 2px 8px 2px 0; }
  .gangumi-status-row > .gangumi-status-label { white-space: normal; }
  .gangumi-status-row > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .gangumi-status-row > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; padding-right: 0; }
}

/* ---------- 見守り当番のタブ：地域の方の名簿(flag.js) ---------- */
/* 見守り当番の印(黄色い四角の旗。少しなびいた形)。黄色の旗の絵文字は無いので、admin.html に絵を描いてある。
   集合場所の印(🎒)とは形で見分けられる。縁は濃い色にして、白い所でも形が分かるようにしてある */
.flag-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}
.flag-district {
  border: 2px solid #c9d3cc;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
}
.flag-district h3 {
  margin: 0 0 6px;
  font-size: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.flag-count {
  font-size: 13px;
  font-weight: normal;
  color: #555;
}
.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.flag-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px dashed #d5d5d5;
}
.flag-name {
  font-size: 15px;
  font-weight: bold;
  min-width: 8em;
}
.flag-mark {
  font-size: 12px;
  color: #555;
  flex: 1;
}
.flag-note {
  font-size: 13px;
  color: #555;
  margin: 4px 0;
}
.flag-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.flag-add input {
  flex: 1;
  min-width: 7em;
  margin: 0;
}

/* ---------- 見守り当番のタブ：当番の決まり・当番表(flag.js・2026-10-14) ---------- */
.flag-readonly .flag-edit-only { display: none !important; }
.flag-sub { font-size: 15px; margin: 16px 0 8px; }
.flag-rule-grid { display: grid; gap: 10px; margin: 10px 0; }
.flag-rule-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flag-rule-label { font-weight: bold; min-width: 4em; }
.flag-choices { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flag-choice {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid #c9d3cc; border-radius: 8px; padding: 6px 10px;
  font-weight: normal; font-size: 14px; margin: 0; cursor: pointer;
}
/* 選んだものは、色だけでなく太い枠と太字でも分かるように */
.flag-choice:has(input:checked) { border-color: var(--main-dark); border-width: 3px; font-weight: bold; background: #eef6ef; }
.flag-choices input[type="time"] { width: auto; margin: 0; }
.flag-rule-now { font-size: 14px; margin: 10px 0 4px; }
.flag-break input[type="date"] { width: auto; flex: 0 1 auto; }
.flag-new-spot { margin-top: 8px; padding: 10px 12px; border: 2px dashed #b8860b; border-radius: 10px; background: #fffbea; }
/* 当番表の地図(2026-10-15 に左右の余白を足し、高さを 360px の1.7倍にした) */
#flag-map { height: 612px; border-radius: 10px; margin: 10px 24px 0; border: 1px solid #ccc; }
@media (max-width: 600px) { #flag-map { margin: 10px 8px 0; height: 460px; } }
.flag-map-pin { display: flex; align-items: flex-end; white-space: nowrap; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.flag-map-pin .flag-icon { width: 30px; height: 30px; min-width: 30px; flex-shrink: 0; vertical-align: 0; }
.flag-map-pin span {
  font-size: 12px; font-weight: bold; background: #fff; border: 2px solid #8a6d00;
  border-radius: 6px; padding: 1px 5px; margin-left: 2px; margin-bottom: 14px;
}
.flag-map-other { opacity: 0.6; }
.flag-map-other span { border-style: dashed; font-weight: normal; }
.flag-route-count { font-size: 14px; margin: 8px 0 0; }
.flag-legend .flag-icon { width: 1.3em; height: 1.3em; }
.flag-spot { border: 2px solid #c9d3cc; border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.flag-spot-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flag-spot-head h3 { margin: 0; font-size: 17px; flex: 1; min-width: 10em; }
.flag-spot-name input { width: 12em; display: inline-block; margin: 0; }
.flag-spot-cols { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.flag-spot-col { flex: 1 1 300px; min-width: 0; }
.flag-spot-col h4 { margin: 4px 0 6px; font-size: 14px; }
.flag-order { list-style: none; margin: 0; padding: 0; }
.flag-order li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  background: #fff; border: 1px solid #d5d5d5; border-radius: 8px;
}
.flag-order li.flag-dragging { border: 2px dashed #555; background: #fffbea; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.flag-handle {
  font-size: 22px; line-height: 1; cursor: grab; padding: 4px 8px; color: #555;
  touch-action: none; user-select: none; border: 1px solid #ccc; border-radius: 6px; background: #f5f5f5;
}
.flag-slot { font-size: 13px; font-weight: bold; min-width: 3em; }
.flag-person { flex: 1; font-size: 15px; }
.flag-kind { font-size: 12px; color: #555; border: 1px solid #aaa; border-radius: 10px; padding: 1px 6px; }
.flag-start { font-size: 14px; margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flag-start input { width: auto; margin: 0; }
.flag-none { font-weight: bold; }
/* 名前は1文字ずつ折り返さない。幅が足りないとき(スマホ)は、種類と「外す」を次の行へ回す */
.flag-order li { flex-wrap: wrap; }
.flag-person { min-width: 6em; white-space: nowrap; }
.flag-order li [data-person-out] { margin-left: auto; }

/* ---------- スマホ：自分の見守り当番の窓(duty.js) ---------- */
.duty-spot { border: 2px solid #c9d3cc; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.duty-spot h3 { margin: 0 0 6px; font-size: 17px; }
.duty-spot p { margin: 4px 0; font-size: 15px; }
.duty-spot h4 { margin: 10px 0 4px; font-size: 14px; }
.duty-days { margin: 0 0 8px; padding-left: 1.4em; font-size: 15px; line-height: 1.8; }
.duty-note { font-size: 13px; color: #555; line-height: 1.7; margin-top: 8px; }

/* ---------- 見守り当番：月のカレンダー(役員ページ flag.js・スマホ duty.js) ---------- */
.flag-cal-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.flag-cal-nav b { font-size: 17px; min-width: 7em; text-align: center; }
.flag-cal-wrap { overflow-x: auto; }
.flag-cal { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: 520px; }
.flag-cal th { font-size: 13px; padding: 4px; background: #f2f2f2; border: 1px solid #ccc; }
.flag-cal td { vertical-align: top; border: 1px solid #ccc; padding: 4px 5px; height: 4.6em; font-size: 13px; line-height: 1.5; }
.flag-cal-date { font-weight: bold; font-size: 13px; }
.flag-cal-today { font-size: 11px; border: 1px solid #333; border-radius: 6px; padding: 0 4px; }
/* きょうは、色だけでなく太い枠と「きょう」の文字でも示す */
.flag-cal td.flag-cal-is-today { outline: 3px solid var(--main-dark); outline-offset: -3px; }
/* 当番なしの日は、薄い地に斜めの線と、わけの文字 */
.flag-cal td.flag-cal-off { background: repeating-linear-gradient(135deg, #f6f6f6 0 6px, #ececec 6px 8px); color: #555; }
.flag-cal-reason { font-size: 12px; }
.flag-cal td.flag-cal-out { background: #fafafa; border-style: dashed; }
.flag-cal-row { word-break: break-all; }
.flag-cal-spot { display: block; font-size: 11px; color: #555; }
/* スマホ：自分の当番の日 */
.duty-cal { min-width: 0; }
.duty-cal td { height: 3.4em; text-align: center; padding: 3px 2px; }
.duty-cal td.duty-mine { background: #fff6c8; font-weight: bold; }
.duty-cal .flag-icon { width: 1.3em; height: 1.3em; }
.duty-cal-head { margin: 14px 0 4px; font-size: 15px; }
/* 年度の祝日の一覧(見守り当番の決まり)。「当番なし／当番あり」を文字でも出す */
.flag-holidays { display: flex; flex-wrap: wrap; gap: 6px; }
.flag-holiday { font-size: 13px; }
.flag-hol-state { font-size: 12px; border: 1px solid #888; border-radius: 10px; padding: 0 6px; }
.flag-holiday:has(input:checked) .flag-hol-state { border-width: 2px; font-weight: bold; }
.flag-hol-summary { font-size: 14px; margin: 4px 0; }
.flag-hol-details summary { cursor: pointer; font-size: 14px; font-weight: bold; color: var(--main-dark); padding: 6px 0; }
.flag-hol-details summary::marker { content: "▼ "; }
.flag-hol-details:not([open]) summary::marker { content: "▶ "; }
.flag-cal-before { font-size: 12px; color: #666; }

/* ---------- くるくる回して選ぶ部品(timewheel.js) ----------
   1つの数字の高さは 36px(timewheel.js の ITEM_H と同じ)。
   ふだんは、窓(.tw-win。1行ぶん)から、選んである数字だけが見える。押したとき(.open)だけ、
   その列が上下に伸びて(5行ぶん)、前後の数字が見える。真ん中の行が選ばれる */
.tw { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  border: 2px solid #c9d3cc; border-radius: 10px; background: #fff; }
.tw-win { position: relative; height: 36px; width: 3.2em; overflow: hidden;
  border-bottom: 2px dashed #888; cursor: pointer; } /* 点線の下線＝押すと選べる */
.tw-win.open { overflow: visible; z-index: 60; border-bottom-color: transparent; }
/* 列は、窓の上下に2行ずつはみ出して置く(閉じているときは窓の外が隠れる)。
   scroll-padding-top … 吸いつく基準を、真ん中の行(上から72px)にする。無いと、数字の少ない列(年)が、ちがう数字に引っぱられる */
.tw-col { position: absolute; left: 0; right: 0; top: -72px; height: 180px;
  overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-top: 72px;
  scrollbar-width: none; overscroll-behavior: contain; outline: none; }
.tw-col::-webkit-scrollbar { display: none; }
.tw-win.open .tw-col { left: -6px; right: -6px; background: #fff; border: 2px solid var(--main-dark); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } /* (うしろが透けないよう、ぼかしは付けない) */
.tw-win:focus-within:not(.open) { outline: 2px solid var(--main-dark); outline-offset: 2px; border-radius: 4px; }
.tw-pad { height: 72px; }
.tw-item { height: 36px; line-height: 36px; text-align: center; font-size: 18px; color: #555;
  scroll-snap-align: start; cursor: pointer; user-select: none; font-variant-numeric: tabular-nums; }
.tw-item.tw-on { font-weight: bold; font-size: 22px; color: #111; }
/* 開いているときの、真ん中の行(選ばれる場所)。上下の線で示す */
.tw-band { display: none; position: absolute; left: -6px; right: -6px; top: 0; height: 36px; pointer-events: none; z-index: 1;
  border-top: 2px solid var(--main-dark); border-bottom: 2px solid var(--main-dark); }
.tw-win.open .tw-band { display: block; }
.tw-unit { font-size: 14px; }
.tw-tilde { font-size: 18px; margin: 0 4px; }
/* 休みの期間(日付をくるくる回して選ぶ) */
.flag-break { border: 1px solid #d5d5d5; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.flag-break .flag-add { margin-top: 0; }
.flag-break-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tw[data-kind="date"] .tw-win { width: 2.6em; }
.tw[data-kind="date"] .tw-win[data-part="y"] { width: 4.4em; }
/* その月に無い日(4月31日など)は、薄く・線で消して、選べないことを示す */
.tw-item.tw-off { color: #bbb; text-decoration: line-through; cursor: default; }
/* 見守り当番の旗の名前のふきだし(カーソルを合わせたとき・押したときだけ出る) */
.flag-tip { font-size: 13px; font-weight: bold; border: 2px solid #8a6d00; border-radius: 6px; padding: 2px 8px; line-height: 1.5; }
/* 見守り当番の地図：選んでいる地区の登校班(集合場所・ルート線)を出すチェック */
.flag-layers { margin-top: 10px; }
.flag-line-mark { display: inline-block; width: 22px; height: 0; border-top: 4px solid #1e88e5; border-radius: 2px; vertical-align: middle; }
.flag-map-ref { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
/* 見守り当番：立つ場所を選択窓で選ぶ(2026-10-15) */
.flag-spot-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.flag-spot-pick > .flag-icon { width: 1.4em; height: 1.4em; }
.flag-spot-pick-label { font-weight: bold; }
#flag-spot-select { width: auto; max-width: min(22em, 70vw); margin: 0; font-size: 16px; }
/* 選んだ場所の旗：跳ねて、足もとに輪が広がる(どの旗か分かるように) */
.flag-map-pin { position: relative; }
.flag-map-pin.flag-jump svg { animation: flag-jump 0.6s ease-out 4; transform-origin: 20% 100%; }
.flag-map-pin.flag-jump::before { content: ""; position: absolute; left: -10px; bottom: -15px; width: 34px; height: 34px;
  border: 3px solid #8a6d00; border-radius: 50%; animation: flag-ring 1.3s ease-out 2; pointer-events: none; }
@keyframes flag-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.15); } 70% { transform: translateY(0); } }
@keyframes flag-ring { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

/* 当番表のカレンダー：マスは見守り箇所の名前だけ。名前にカーソルを合わせる・押すと、ポップで担当と当番の順番を出す */
.flag-cal-row { cursor: pointer; border-bottom: 1px dashed #bbb; padding: 1px 0; }
.flag-cal-row:hover, .flag-cal-row:focus { background: #fff6c8; outline: 2px solid #8a6d00; outline-offset: -2px; }
.flag-cal-pop { display: none; position: fixed; z-index: 3000; max-width: 280px; background: #fff; border: 2px solid #8a6d00;
  border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); font-size: 14px; line-height: 1.6; pointer-events: none; }
.flag-cal-pop-head { font-weight: bold; font-size: 15px; }
.flag-cal-pop .flag-icon { width: 1.2em; height: 1.2em; }
.flag-cal-pop-sub { margin-top: 6px; font-size: 12px; color: #555; }
.flag-cal-pop ol { margin: 2px 0 0; padding-left: 0; list-style: none; } /* (「1番」などを自分で付けるので、一覧の番号は出さない) */
.flag-cal-pop li.on { font-weight: bold; text-decoration: underline; }

/* ============================================================
   扇のメニュー(fanmenu.js。2026-10-26 に、下の3列×2段のメニューから置きかえた)
   印 menu-fan は、マップ・イベントの画面の <html> に付けてある。左下に置いている端末は menu-left。
   右下(左下)の丸いボタン「☰ メニュー」を要に、丸いボタン(104px)が扇の形に開く。
   ボタンの置き場所は fanmenu.js が --fx・--fy(要の真ん中から、右へ・下へ)に入れる。左下のときは左右を入れかえる。
   ============================================================ */
html.menu-fan #menu-bar {
  left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 80px; height: 80px; padding: 0;
  background: none; border: none; box-shadow: none;
  transform: none !important; transition: none;
}
html.menu-fan #menu-bar, html.menu-fan #menu-bar * { touch-action: none; }
/* 要の丸いボタン。閉じているときは緑の地に「☰ メニュー」、開いているときは白い地に「✕ とじる」(色だけでなく、印と文字も変わる) */
html.menu-fan #menu-bar-tabs { left: 0; top: 0; bottom: auto; width: 80px; height: 80px; z-index: 2; }
html.menu-fan #menu-bar-handle,
html.menu-fan #menu-bar:not(.closed) #menu-bar-handle {
  width: 80px; height: 80px; min-width: 0; margin: 0; padding: 0;
  flex-direction: column; gap: 0; font-size: 0;
  border: 3px solid var(--main-dark); border-radius: 50%;
  clip-path: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  color: #fff; background: var(--main-dark);
  transition: background-color 0.25s ease, color 0.25s ease;
}
html.menu-fan #menu-bar:not(.closed) #menu-bar-handle { color: var(--main-dark); background: #fff; }
html.menu-fan #menu-bar-handle > span { display: none; }
html.menu-fan #menu-bar-handle::before { content: "☰"; font-size: 30px; line-height: 1; }
html.menu-fan #menu-bar-handle::after,
html.menu-fan #menu-bar:not(.closed) #menu-bar-handle::after {
  content: "メニュー"; position: static; height: auto; background: none;
  font-size: 13px; font-weight: bold; line-height: 1.2; margin-top: 3px;
}
html.menu-fan #menu-bar:not(.closed) #menu-bar-handle::before { content: "✕"; }
html.menu-fan #menu-bar:not(.closed) #menu-bar-handle::after { content: "とじる"; }
/* 設定の扇を出している間、要は「↩ 戻る」 */
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #menu-bar-handle::before { content: "↩"; }
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #menu-bar-handle::after { content: "戻る"; }

/* 扇のボタン(メニューの扇=#menu-bar-grid、設定の扇=#fan-set)。閉じているときは要の下に小さく隠れている */
html.menu-fan #menu-bar-grid,
html.menu-fan #fan-set {
  display: block; position: absolute; left: 0; top: 0; width: 80px; height: 80px; max-width: none; margin: 0;
}
html.menu-fan #menu-bar-grid .menu-btn,
html.menu-fan #fan-set .menu-btn {
  position: absolute; left: -12px; top: -12px; width: 104px; height: 104px; min-height: 0;
  box-sizing: border-box; padding: 4px 2px; font-size: 15px; white-space: nowrap; border-radius: 50%;
  opacity: 0; pointer-events: none; transform: scale(0.3);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
html.menu-fan #menu-bar-grid .menu-btn-icon,
html.menu-fan #fan-set .menu-btn-icon { font-size: 36px; }
html.menu-fan #fan-set .menu-btn-svg { width: 40px; height: 33px; }
/* 5文字以上の名前(表示アイコン・見守り当番など)は、丸のふちにかからないよう小さく */
html.menu-fan .menu-btn.fan-long .menu-btn-label { font-size: 13px; letter-spacing: -0.3px; }
html.menu-fan #menu-bar-grid .menu-btn:active,
html.menu-fan #fan-set .menu-btn:active { filter: brightness(0.9); }
/* いま開いているページのボタン(マップの画面のマップ、イベントの画面のイベント)は出さない */
html.menu-fan #menu-bar-grid .menu-btn[aria-current="page"] { display: none; }
html.menu-fan #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #fan-set .menu-btn {
  opacity: 1; pointer-events: auto; transform: translate(var(--fx), var(--fy));
}
/* 見える範囲の外(回すと出てくる)ボタンは、隠して押せなくする(要の横の矢印が「続きがある」目印になる) */
html.menu-fan #menu-bar:not(.closed) #menu-bar-grid .menu-btn.wheel-off,
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #fan-set .menu-btn.wheel-off { opacity: 0; pointer-events: none; }
/* 設定の扇を出している間は、メニューの扇のボタンと矢印をしまう。メニューの扇の間は、設定の扇の矢印をしまう */
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) .wheel-arrow.ring-main,
html.menu-fan:not(.fan-settings-mode) #menu-bar:not(.closed) .wheel-arrow.ring-set {
  opacity: 0; pointer-events: none; transform: scale(0.3);
}

/* 回す矢印(なぞるのが苦手な人のため)。要と輪のあいだに2つ */
html.menu-fan .wheel-arrow {
  position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; padding: 0;
  font-family: inherit; font-size: 24px; font-weight: bold; line-height: 1;
  color: var(--main-dark); background: #fff; border: 2px solid var(--main-dark); border-radius: 50%;
  box-shadow: 0 2px 0 var(--main-dark); cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(0.3);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
html.menu-fan #menu-bar:not(.closed) .wheel-arrow { opacity: 1; pointer-events: auto; transform: translate(var(--fx), var(--fy)); }
html.menu-fan #menu-bar:not(.closed) .wheel-arrow.wheel-arrow-off { opacity: 0.3; pointer-events: none; }

/* ボタンのうしろの扇の地。要を中心にした4分の1の円(半径225px)で、右と下は画面の端までのばす。
   うしろの地図をぼかしたすりガラスで、ふちに向かって緑を少し濃くする。ふちは、緑の太い線の内側に白と緑の細い線を重ねた二重のふち。
   ボタンが回る道すじ(半径103〜207px)には、白い帯と、その両がわに細い線を敷く。地の上を押しても、何も起きない(閉じない) */
html.menu-fan #menu-bar::before {
  content: ""; position: absolute; left: -185px; top: -185px; width: 450px; height: 450px;
  box-sizing: border-box; border-radius: 50%; z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0 101px, rgba(27, 94, 32, 0.35) 101px 102.5px,
      rgba(255, 255, 255, 0.55) 102.5px 207.5px, rgba(27, 94, 32, 0.35) 207.5px 209px, rgba(255, 255, 255, 0) 209px),
    radial-gradient(circle closest-side, rgba(27, 94, 32, 0) 0 35%, rgba(27, 94, 32, 0.18) 100%),
    rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  border: 3px solid var(--main-dark);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.85), inset 0 0 0 7px rgba(46, 125, 50, 0.55);
  /* 下は、画面の下の端まで(iPhone のホームバーの余白があると、その分だけ伸ばす。2026-10-27。アプリで細い暗い帯が残っていた) */
  clip-path: polygon(0 0, calc(50% + 80px) 0, calc(50% + 80px) calc(50% + 80px + env(safe-area-inset-bottom, 0px)), 0 calc(50% + 80px + env(safe-area-inset-bottom, 0px)));
  opacity: 0; transform: scale(0.2); pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
html.menu-fan #menu-bar:not(.closed)::before { opacity: 1; transform: scale(1); pointer-events: auto; }

/* 開いているあいだは、うしろを暗くする(押すと閉じる) */
#fan-backdrop {
  position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.26s ease 0.2s;
}
html.menu-fan.fan-open #fan-backdrop { opacity: 1; pointer-events: auto; transition: opacity 0.2s ease; }

/* 現在地のボタンは、丸いメニューのボタンの上に置く。地図の下の部品は、もうよけない。
   扇を開いている間は隠し(扇のボタンのすき間から見えて、まぎらわしいため)、閉じ終わってから戻す(ちらつかないように) */
html.menu-fan .map-locate-btn { right: 24px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transition: opacity 0.2s ease 0.38s; }
html.menu-fan.fan-open .map-locate-btn { opacity: 0; pointer-events: none; transition: opacity 0.1s ease; }
html.menu-fan #map .leaflet-bottom { bottom: 0; }
html.menu-fan #menu-bar ~ main { padding-bottom: 120px; }

/* ----- 左下に置くとき。扇は左右を入れかえた形になる。現在地のボタンは右下のもとの場所 ----- */
html.menu-fan.menu-left #menu-bar { right: auto; left: 16px; }
html.menu-fan.menu-left #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan.menu-left.fan-settings-mode #menu-bar:not(.closed) #fan-set .menu-btn,
html.menu-fan.menu-left #menu-bar:not(.closed) .wheel-arrow { transform: translate(calc(var(--fx) * -1), var(--fy)); }
html.menu-fan.menu-left #menu-bar::before {
  clip-path: polygon(calc(50% - 80px) 0, 100% 0, 100% calc(50% + 80px + env(safe-area-inset-bottom, 0px)), calc(50% - 80px) calc(50% + 80px + env(safe-area-inset-bottom, 0px)));
}
html.menu-fan.menu-left .map-locate-btn { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* (左下のときも、しまう側のボタンと矢印は要へ縮める。上の左右の入れかえより後に書く) */
html.menu-fan.menu-left.fan-settings-mode #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan.menu-left.fan-settings-mode #menu-bar:not(.closed) .wheel-arrow.ring-main,
html.menu-fan.menu-left:not(.fan-settings-mode) #menu-bar:not(.closed) .wheel-arrow.ring-set { transform: scale(0.3); }

/* ----- 開く・閉じる動き -----
   開くとき:暗い地が先に出て、扇の地が要から広がり、要に近いボタンから順に(0.045秒ずつずらして)すべり出る。
   閉じるとき:そのちょうど逆。遠いボタンから順に要へすべりこみ(消えるのは要に着く直前)、扇の地がたたまれ、暗い地が引く。
   順番は --oi(開く順)・--ci(閉じる順)。fanmenu.js の place() が、見えているボタンに付ける。
   回すとき(wheel-turning・wheel-drag)と、設定の扇との切りかえでしまう側は、ずらさずにすぐ動かす */
html.menu-fan #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan #menu-bar:not(.closed) #fan-set .menu-btn {
  transition: transform 0.26s cubic-bezier(0.25, 0.8, 0.45, 1) calc(var(--oi, 0) * 45ms + 0.12s),
              opacity 0.1s linear calc(var(--oi, 0) * 45ms + 0.12s);
}
html.menu-fan #menu-bar:not(.closed)::before {
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.45, 1) 0.04s, opacity 0.12s linear 0.04s;
}
html.menu-fan #menu-bar:not(.closed) .wheel-arrow {
  transition: transform 0.2s ease-out 0.24s, opacity 0.12s linear 0.24s;
}
html.menu-fan #menu-bar.closed #menu-bar-grid .menu-btn,
html.menu-fan #menu-bar.closed #fan-set .menu-btn {
  transition: transform 0.26s cubic-bezier(0.55, 0, 0.75, 0.2) calc(var(--ci, 0) * 45ms),
              opacity 0.12s linear calc(var(--ci, 0) * 45ms + 0.16s);
}
html.menu-fan #menu-bar.closed::before {
  transition: transform 0.28s cubic-bezier(0.55, 0, 0.75, 0.2) 0.12s, opacity 0.18s linear 0.24s;
}
html.menu-fan #menu-bar.closed .wheel-arrow { transition: transform 0.2s ease-in, opacity 0.12s linear 0.08s; }
html.menu-fan #menu-bar.wheel-turning:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan #menu-bar.wheel-turning:not(.closed) #fan-set .menu-btn,
html.menu-fan #menu-bar.wheel-turning:not(.closed) .wheel-arrow { transition: transform 0.25s ease, opacity 0.2s ease; }
html.menu-fan #menu-bar.wheel-drag:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan #menu-bar.wheel-drag:not(.closed) #fan-set .menu-btn { transition: none; }
html.menu-fan:not(.fan-settings-mode) #menu-bar:not(.closed) #fan-set .menu-btn,
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) #menu-bar-grid .menu-btn,
html.menu-fan.fan-settings-mode #menu-bar:not(.closed) .wheel-arrow.ring-main,
html.menu-fan:not(.fan-settings-mode) #menu-bar:not(.closed) .wheel-arrow.ring-set {
  transition: transform 0.18s ease-in, opacity 0.12s linear;
}
/* 使いかたの案内が指し示すときは、動きなしでその場で開く・閉じる(案内がすぐに場所を測るため。fanmenu.js の reveal・closeNow) */
html.menu-fan #menu-bar.fan-instant,
html.menu-fan #menu-bar.fan-instant *,
html.menu-fan #menu-bar.fan-instant::before,
html.menu-fan.fan-quick #menu-bar *,
html.menu-fan.fan-quick #menu-bar::before,
html.menu-fan.fan-quick #fan-backdrop,
html.menu-fan.fan-quick .map-locate-btn { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.menu-fan #menu-bar *,
  html.menu-fan #menu-bar::before,
  #fan-backdrop,
  html.menu-fan .map-locate-btn { transition: none !important; }
}

/* 規約など(サポート・利用規約・プライバシーポリシー)を、地図の上に横から重ねて出す(2026-10-27。nofwd.js の openSheetPage)。
   閉じたら開いていた地図にそのまま戻る(ページを移って読み込み直すと、一瞬止まっていた) */
.sheet-page {
  position: fixed; inset: 0; z-index: 5000; background: #f4f6f4;
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -6px 0 18px rgba(0, 0, 0, 0.18);
}
.sheet-page.open { transform: translateX(0); }
.sheet-page iframe { display: block; width: 100%; height: 100%; border: 0; }