/* ============================================================
   マイページの見た目（年配の方に見やすく・押しやすく）

   決まりごと（2026-09-27）
   ・本文は18px以上。大事な所は20px以上
   ・ボタンは高さ56px以上。指が太くても、老眼でも押しまちがえない
   ・白地に薄い色の文字を使わない（今のポータルの黄色い文字は読めない）
   ・色だけで意味を伝えない（急ぎは赤＋「至急」の文字）
   ・アイコンだけにしない。必ず文字を添える
   ・屋外（日なた）でスマホを見るので、明るい地にはっきりした文字
   ============================================================ */

:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-sub: #444b55;
  --line: #c9d0da;
  --line-strong: #8a94a3;
  --primary: #0b3d91;
  --primary-dark: #082c69;
  --primary-bg: #e7eefb;
  --danger: #b00020;
  --danger-bg: #fdecee;
  --ok: #1b5e20;
  --ok-bg: #e8f5e9;
  --warn-bg: #fff4d6;
  --warn-text: #6b4a00;
  --focus: #b35c00;
  --radius: 14px;
  font-size: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

body { padding-bottom: 48px; }

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}

h1 { font-size: 1.5rem; margin: 8px 0 16px; line-height: 1.4; }
h2 { font-size: 1.2rem; margin: 28px 0 10px; display: flex; align-items: center; gap: 8px; }
p { margin: 0 0 12px; }

a { color: var(--primary); }

/* ------------------------------------------------------------
   上の帯（名前と「更新」）
   ------------------------------------------------------------ */
.topbar {
  background: var(--card);
  border-top: 6px solid var(--primary);
  border-bottom: 2px solid var(--line);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.topbar-who { min-width: 0; }
.topbar .who { font-size: 1.25rem; font-weight: bold; line-height: 1.4; word-break: break-word; }
.topbar .date { font-size: 1rem; font-weight: bold; color: var(--text-sub); }
.topbar .btn.reload {
  flex: none;
  min-height: 56px;
  min-width: 96px;
  font-size: 1.1rem;
  gap: 6px;
}

/* ------------------------------------------------------------
   カード
   ------------------------------------------------------------ */
.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card.urgent {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.card .body {
  font-size: 1.15rem;
  font-weight: bold;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
}
.card .meta {
  font-size: 0.95rem;
  color: var(--text-sub);
  margin-bottom: 10px;
}
.empty {
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text-sub);
}

/* 印（至急・新着・確認済み） */
.tag {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 0 8px;
  margin-right: 6px;
  line-height: 1.6;
}
.tag.urgent { color: var(--danger); background: #fff; }
.tag.new { color: var(--primary); background: #fff; }
.tag.done { color: var(--ok); background: #fff; }
.tag.person { color: var(--primary-dark); background: var(--primary-bg); }
.tag.all { color: var(--text-sub); background: #fff; }

/* ------------------------------------------------------------
   ボタン（高さ56px以上）
   ------------------------------------------------------------ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  font-size: 1.15rem;
  font-weight: bold;
  font-family: inherit;
  color: var(--primary);
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn:active { transform: scale(0.98); }
.btn.primary { color: #fff; background: var(--primary); }
.btn.primary:active { background: var(--primary-dark); }
.btn.small {
  width: auto;
  min-height: 48px;
  font-size: 1rem;
  padding: 6px 14px;
}
.btn[disabled] { opacity: 0.85; cursor: wait; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

.btn.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn.danger:active { background: #8a0019; }
/* 目立たせたくないボタン（ログアウトなど）。灰色でも文字ははっきり読める濃さにする */
.btn.quiet { color: var(--text-sub); border-color: var(--line-strong); }

/* よそのページへのボタン（左に名前、右に「別の画面」の絵） */
.btn.ext-link {
  justify-content: space-between;
  text-align: left;
  min-height: 64px;
}
.ext-text { display: flex; flex-direction: column; min-width: 0; }
.ext-text small { font-size: 0.9rem; font-weight: normal; color: var(--text-sub); }
.ext-icon { flex: none; }

/* ------------------------------------------------------------
   入力欄
   ------------------------------------------------------------ */
label.field {
  display: block;
  font-weight: bold;
  font-size: 1.1rem;
  margin: 16px 0 6px;
}
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%;
  font-size: 1.4rem;
  font-family: inherit;
  padding: 10px 14px;
  min-height: 56px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
textarea { font-size: 1.1rem; min-height: 120px; }
input.digits { letter-spacing: 0.3em; }
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  margin: 10px 0;
  min-height: 44px;
}
.check input { width: 28px; height: 28px; }

.hint {
  background: var(--primary-bg);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  margin: 12px 0;
}
.rules { margin: 8px 0 0; padding-left: 1.3em; }

/* 結果の知らせ（押したら必ず出す） */
.notice {
  display: none;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-weight: bold;
  font-size: 1.05rem;
}
.notice.show { display: block; }
.notice.error { background: var(--danger-bg); color: var(--danger); border: 2px solid var(--danger); }
.notice.ok { background: var(--ok-bg); color: var(--ok); border: 2px solid var(--ok); }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.sub { color: var(--text-sub); font-size: 1rem; }

/* ============================================================
   スタッフのトップ画面（index.html）だけで使うもの
   （2026-09-28 3回目の作り直し：強弱を付ける・ボタンを少なく）
     いちばん強い … 報告のタイル（紺で塗る）・確認が要るお知らせ（だいだいの太いふち）
     ふつう       … みなさんへのお知らせ（白地に細いふち）・小さめのボタン2つ（白地に紺のふち）
     控えめ       … 天気（小さな欄）・設定・ログアウト（灰色の小さなボタン）
   ============================================================ */

/* 画面を読む道具（読み上げ）にだけ伝える文字 */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.home .nowrap { white-space: nowrap; }
.home main.wrap { padding-top: 8px; }
.home .topbar .wrap { padding-top: 8px; padding-bottom: 8px; }

/* 欄の見出し */
.home .sec { margin-top: 16px; }
.home .sec:first-of-type { margin-top: 4px; }
.home .sec h2 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 6px solid var(--primary);
}
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.home .sec-head h2 { margin: 0; }
.need-badge {
  display: inline-block;
  background: #a85200;
  color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 2px 12px;
}

/* ---------- お知らせ（1つの欄） ---------- */
.news-item {
  background: var(--card);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.news-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-bottom: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags .tag { margin-right: 0; font-size: max(14px, 0.85rem); padding: 0 6px; }
.news-date { font-size: max(14px, 0.9rem); color: var(--text-sub); }
.news-body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }

/* 確認が要るもの（あなたへ）… いちばん目立たせる */
.news-item.need {
  border: 3px solid #a85200;
  border-left-width: 10px;
  padding: 12px 14px 14px;
}
.news-item.need .news-body { font-size: 1.15rem; font-weight: bold; }
.news-item.need.urgent { border-color: var(--danger); background: var(--danger-bg); }
.btn.confirm { margin-top: 10px; min-height: 56px; font-size: 1.2rem; }
.news-item.done { border: 2px solid var(--ok); }
.news-item.done .notice { margin-bottom: 0; }

/* みなさんへ … 読むだけなので控えめに */
.news-item.info .news-body { font-size: 1rem; }
.news-item.info.urgent { border-left: 6px solid var(--danger); }

.news-empty { margin: 0; padding: 4px 2px; color: var(--text-sub); font-size: 1rem; }
.news-more { margin: -2px 0 0; text-align: right; line-height: 1.4; }
.news-more a { display: inline-block; padding: 6px 2px; font-size: 1rem; font-weight: bold; }

/* ---------- 報告のタイル（画面の主役） ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 100px;
  padding: 10px 8px;
  background: var(--primary);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--primary-dark);
  text-decoration: none;
  text-align: center;
}
.tile:active { background: var(--primary-dark); transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-dark); }
.tile:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.tile-icon { display: flex; }
.tile-label { font-size: 1.3rem; font-weight: bold; line-height: 1.3; }
.tile.soon { background: #eceff3; color: var(--text-sub); box-shadow: none; border: 2px dashed var(--line-strong); }
.tile-soon { font-size: 0.9rem; }

/* ---------- 小さめのボタン2つ（ノジマへご提言・メーカーのサイト） ---------- */
.subbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.subbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 6px 4px;
  background: var(--card);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 12px;
  font-family: inherit;
  font-size: max(15px, 0.95rem);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.subbtn svg { flex: none; }
.subbtn:active { background: var(--primary-bg); }
.subbtn:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

/* ---------- 天気（小さな欄・5日分を横1列） ---------- */
.home .sec-weather { margin-top: 28px; }
.home .sec-weather h2 { font-size: 1.05rem; color: var(--text-sub); border-left: 4px solid var(--line-strong); }
.wx-strip {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px 2px 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.wx-strip:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.wx-card {
  flex: 0 0 104px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  line-height: 1.35;
}
.wx-card.today { border: 2px solid var(--primary); background: var(--primary-bg); }
.wx-when { display: flex; flex-direction: column; }
.wx-name { font-weight: bold; font-size: 1rem; }
.wx-card.today .wx-name { color: var(--primary-dark); }
.wx-md { font-size: 0.9rem; color: var(--text-sub); }
.wx-icon { flex: none; }
.wx-word { font-weight: bold; font-size: 1rem; }
.wx-temp { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold; }
.wx-max { color: var(--danger); }
.wx-min { color: var(--primary); }
.wx-pop { font-size: 0.95rem; font-weight: bold; display: flex; flex-direction: column; }
.wx-pop small { font-size: max(14px, 0.85rem); font-weight: normal; color: var(--text-sub); }
.wx-umb-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  padding: 0 6px;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--primary-dark);
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 8px;
}
.wx-hint { margin: 2px 0 0; text-align: center; font-size: 0.9rem; color: var(--text-sub); }
.wx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 4px 0 0; font-size: 0.9rem; color: var(--text-sub); }
.wx-more { display: inline-flex; align-items: center; gap: 2px; padding: 11px 0; font-weight: bold; }

/* 天気の絵の色（お日さまは黄色＋濃いふち。文字には黄色を使わない） */
.wx-sun { fill: #ffc21a; stroke: #8a5a00; stroke-width: 2.5; }
.wx-ray { stroke: #c27c00; stroke-width: 3; stroke-linecap: round; }
.wx-cloud { fill: #e6eaef; stroke: #4a5563; stroke-width: 2.5; stroke-linejoin: round; }
.wx-drop { stroke: #1565c0; stroke-width: 3.2; stroke-linecap: round; }
.wx-flake { fill: #1565c0; }
.wx-none { stroke: #8a94a3; stroke-width: 3; stroke-linecap: round; }

/* ---------- 設定・ログアウト（小さく控えめに） ---------- */
.foot-btns { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.foot-btns .btn.small { min-width: 132px; min-height: 48px; font-size: 1rem; }
.logout-box {
  margin-top: 16px;
  padding: 14px;
  background: var(--danger-bg);
  border: 2px solid var(--danger);
  border-radius: var(--radius);
}
.logout-box p { margin: 0 0 12px; }

/* ---------- メーカーのサイトの小窓（モーダル） ---------- */
body.modal-open { overflow: hidden; }
dialog.modal {
  width: min(94vw, 520px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-head h2 { font-size: 1.3rem; margin: 0; }
.modal-x {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 48px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
}
.modal-lead { font-size: 0.95rem; color: var(--text-sub); margin: 8px 0 12px; }
.maker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.maker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 88px;
  padding: 8px 6px;
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  text-decoration: none;
}
.maker:active { background: var(--primary-bg); }
.maker:focus-visible, .modal-x:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.maker-logo { width: 100%; height: 40px; }
.maker-logo text { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Noto Sans JP", system-ui, sans-serif; }
.maker-img { max-width: 100%; max-height: 44px; }
.maker-go { display: inline-flex; align-items: center; gap: 2px; font-size: 0.85rem; color: var(--text-sub); }
.btn.big-close { margin-top: 16px; min-height: 60px; font-size: 1.2rem; }

/* ---------- ホーム画面に追加・通知をオンにする小窓（assets/home-push.js）---------- */
/* iPhone でブラウザの中から開いているときの、上の小さな1行の案内 */
.home-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 4px;
  padding: 6px 10px;
  background: var(--primary-bg);
  border-radius: 10px;
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.45;
}
.home-hint svg { flex: none; }
.home-hint span { flex: 1 1 12em; }
.hint-how {
  min-height: 48px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: var(--primary);
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 10px;
  cursor: pointer;
}
.modal-say { font-size: 1.05rem; font-weight: bold; margin: 10px 0 8px; }
.modal-actions { display: grid; gap: 10px; margin-top: 16px; }
.modal-actions .btn.big-close { margin-top: 0; }
.btn.later { color: var(--text-sub); border-color: var(--line-strong); min-height: 56px; }

/* 手順（1〜5） */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.how-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.how-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: bold;
}
.how-pics { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--primary); }
.how-arrow { font-size: 1.4rem; font-weight: bold; color: var(--text-sub); }
.how-app { border-radius: 10px; border: 1px solid var(--line); }
.how-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.how-text b { font-size: 1rem; }
.how-sub { font-size: 0.9rem; color: var(--text-sub); }
/* スマホの絵（押す場所をだいだい色の丸で示す） */
.ph-body { fill: #fff; stroke: #4a5563; stroke-width: 2.5; }
.ph-bar { fill: #e6eaef; }
.ph-mark { fill: #fff4e0; stroke: #a85200; stroke-width: 3; }
.ph-pic g { color: var(--primary); }

/* 通知の小窓 */
.notif-say { font-size: 1.1rem; font-weight: bold; margin: 10px 0 4px; }
.notif-tip { margin: 10px 0 0; padding: 8px 12px; background: #fff4e0; border: 2px solid #a85200; border-radius: 10px; color: #6e3500; }
.notif-tip b { color: #6e3500; }
#notif-body .notice.show { margin-bottom: 0; }
.deny-box { margin-top: 10px; padding: 12px 14px; background: var(--danger-bg); border: 2px solid var(--danger); border-radius: 10px; }
.deny-title { margin: 0 0 6px; font-weight: bold; color: var(--danger); font-size: 1.05rem; }
.deny-how { margin: 0; color: var(--text); line-height: 1.7; }

/* hidden を付けたものは必ず隠す（.btn などの display 指定に負けないように） */
[hidden] { display: none !important; }

/* ---- 文字の大きさ（大・中・小）2026-09-29 ----
   画面の文字はほとんど rem（基本の大きさの何倍か）で決めているので、基本の大きさを変えるだけで全体が変わる。
   中＝18px（今まで通り）。assets/fontsize.js が <html data-fs="s|m|l"> を付ける */
:root[data-fs="s"] { font-size: 16px; }
:root[data-fs="l"] { font-size: 21px; }
.fs-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.fs-choice { min-height: 72px; border: 2px solid var(--primary, #0b3d91); border-radius: var(--radius); background: #fff; color: var(--primary, #0b3d91);
  font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.fs-choice .fs-sample { line-height: 1; }
.fs-choice.s .fs-sample { font-size: 16px; }
.fs-choice.m .fs-sample { font-size: 20px; }
.fs-choice.l .fs-sample { font-size: 26px; }
.fs-choice .fs-name { font-size: 1rem; }
.fs-choice[aria-pressed="true"] { background: var(--primary, #0b3d91); color: #fff; }
.fs-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- ログインの画面：はじめに「どちらですか？」（2026-09-29）---- */
.login-q { margin: 0 0 12px; font-size: 1.3rem; }
.login-pick { width: 100%; min-height: 84px; margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left; padding: 12px 16px; }
.login-pick-main { font-size: 1.3rem; font-weight: bold; line-height: 1.3; }
.login-pick-sub { font-size: 0.9rem; font-weight: normal; line-height: 1.4; }
.linklike { background: none; border: none; color: var(--primary); text-decoration: underline; font-size: 1rem; padding: 12px 8px; min-height: 48px; cursor: pointer; }
.linklike:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- ホーム画面に追加の前の「安心してください」（2026-09-29）---- */
.safe-note { background: #e8f5e9; border: 2px solid #1b5e20; border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 14px; color: #173d1a; }
.safe-note .safe-title { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.safe-note ul { margin: 0; padding-left: 1.2em; }
.safe-note li { margin: 4px 0; line-height: 1.6; }

/* ---- LINE などのアプリの中で開いたときの案内（2026-09-29）---- */
.inapp-warn { background: #fff4d6; border-bottom: 4px solid #b35c00; padding: 16px; font-size: 1.05rem; line-height: 1.7; color: #3d2600; }
.inapp-warn .inapp-title { display: block; font-size: 1.25rem; margin-bottom: 6px; }
.inapp-warn p { margin: 6px 0; }
.inapp-warn .inapp-addr { font-weight: bold; word-break: break-all; }
.inapp-warn .inapp-copy { width: 100%; margin-top: 8px; }

/* ============================================================
   1つずつ進める作り（assets/steps.js）2026-09-29
     ・上に「ステップ 2 ／ 5」と、済んだ段に ✓ が付いた短い一覧
     ・いまの段だけを大きく。やることのボタンは1つ（大きく）
   ============================================================ */
.stp-progress { margin: 0 0 4px; font-size: 1.1rem; font-weight: bold; color: var(--primary-dark); }
.stp-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.stp-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 3px;
  border-radius: 999px;
  font-size: max(14px, 0.85rem);
  line-height: 1.45;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-sub);
}
.stp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eceff3;
  color: var(--text-sub);
  font-weight: bold;
  font-size: max(14px, 0.85rem);
}
.stp-item.done { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.stp-item.done .stp-mark { background: var(--ok); color: #fff; }
.stp-item.now { border: 2px solid var(--primary); color: var(--primary-dark); background: var(--primary-bg); font-weight: bold; }
.stp-item.now .stp-mark { background: var(--primary); color: #fff; }

.stp-stage {
  background: var(--card);
  border: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px;
}
.stp-title { font-size: 1.35rem; line-height: 1.45; margin: 0 0 10px; }
.stp-title:focus { outline: none; }
.stp-body p { margin: 0 0 10px; }
.stp-lead { font-size: 1.1rem; font-weight: bold; }
.stp-big { font-size: 1.3rem; line-height: 1.5; }
.stp-big b { color: var(--danger); font-size: 1.5rem; }
.stp-after { background: var(--primary-bg); border-radius: 10px; padding: 10px 12px; font-weight: bold; color: var(--primary-dark); margin-top: 12px; }
.stp-office { font-size: 0.95rem; color: var(--text-sub); margin-top: 10px; }

/* 確かめています… */
.stp-wait {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  padding: 14px;
  background: var(--primary-bg);
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--primary-dark);
}
.stp-spin {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 4px solid #b9c7df;
  border-top-color: var(--primary);
  animation: stp-spin 1s linear infinite;
}
@keyframes stp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stp-spin { animation: none; } }

/* やること（大きなボタン） */
.stp-acts { display: grid; gap: 10px; margin-top: 14px; }
.btn.stp-main { min-height: 64px; font-size: 1.25rem; }
.btn.stp-sub { min-height: 56px; color: var(--text-sub); border-color: var(--line-strong); }

/* 止まったとき：理由とやること */
.stp-problem {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fff4e0;
  border: 3px solid #a85200;
  border-radius: 12px;
  color: var(--text);
}
.stp-problem-head { font-size: 1.15rem; font-weight: bold; color: #6e3500; margin: 0 0 6px; }
.stp-problem-text { margin: 0 0 6px; line-height: 1.7; }
.stp-todo { margin-top: 8px; background: #fff; border-radius: 10px; padding: 8px 12px; }
.stp-todo-head { font-weight: bold; margin: 0 0 4px; }
.stp-todo-list { margin: 0; padding-left: 1.4em; }
.stp-todo-list li { margin: 6px 0; line-height: 1.6; }

/* ［もう一度やってみる］［前の段にもどる］ */
.stp-nav { display: grid; gap: 10px; margin-top: 14px; }
.btn.stp-retry { min-height: 60px; font-size: 1.2rem; color: #fff; background: #a85200; border-color: #a85200; }
.btn.stp-back { min-height: 48px; font-size: 1rem; color: var(--text-sub); border-color: var(--line-strong); }

/* 「許可しますか？」の絵 */
.allow-pic { display: block; width: 100%; max-width: 280px; margin: 4px auto 8px; }
.ap-box { fill: #fff; stroke: #4a5563; stroke-width: 2; }
.ap-q { font-size: 15px; font-weight: bold; fill: #1a1a1a; }
.ap-no { fill: #eceff3; }
.ap-no-t { font-size: 13px; fill: #444b55; }
.ap-yes { fill: var(--primary); }
.ap-yes-t { font-size: 15px; font-weight: bold; fill: #fff; }
.ap-mark { fill: none; stroke: #d97a00; stroke-width: 4; }

/* 試しの通知の見本 */
.test-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 360px;
  margin: 6px 0 10px;
  padding: 10px 14px;
  background: #2b2f36;
  color: #fff;
  border-radius: 14px;
}
.tc-app { font-size: max(14px, 0.85rem); color: #d7dce3; }
.tc-text { font-size: 1rem; font-weight: bold; line-height: 1.5; }

/* スマホの通知の設定（/notify）の下の「うまくいかないときは」 */
.notify-h1 { margin-bottom: 10px; }
.notify-help { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--line); }
.notify-help h2 { font-size: 1.05rem; color: var(--text-sub); margin: 0 0 6px; }
.notify-help .btn.small { min-height: 48px; }

/* ============================================================
   設定の画面（設定したいことの一覧）2026-09-29
   ============================================================ */
.set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.set-item { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.set-head { display: flex; align-items: center; gap: 10px; }
.set-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-size: 1.3rem;
  font-weight: bold;
}
.set-name { font-size: 1.25rem; margin: 0; }
.set-state { margin: 8px 0 10px; font-size: 1rem; line-height: 1.6; color: var(--text-sub); }
.set-state.on { color: var(--ok); font-weight: bold; font-size: 1.1rem; }
.set-state.todo { color: #6e3500; font-weight: bold; }
.btn.set-go { min-height: 60px; font-size: 1.2rem; }
.set-small { display: block; margin: 16px auto 0; }
.set-confirm { margin-top: 12px; padding: 14px; background: var(--danger-bg); border: 2px solid var(--danger); border-radius: var(--radius); }
.set-confirm p { margin: 0 0 12px; }
.set-back { margin-bottom: 8px; }
.set-flow-name { font-size: 1.2rem; font-weight: bold; margin: 8px 0 4px; color: var(--text-sub); }
input.pin-big { font-size: 1.8rem; letter-spacing: 0.5em; text-align: center; }
.field-err { color: var(--danger); font-weight: bold; margin: 6px 0 0; }


/* ---- みなさんへのお知らせの「読みました」と「今日のお知らせ」（2026-09-29）---- */
.news-item .read-btn { width: 100%; min-height: 52px; margin-top: 10px; border: 2px solid var(--primary); background: #fff; color: var(--primary); font-weight: bold; }
.news-item.pinned { border: 3px solid #b35c00; background: #fff8ea; }
.tag.pinned { background: #b35c00; color: #fff; border-color: #b35c00; }
.news-pin-note { margin: 8px 0 0; font-size: 0.9rem; color: #6b4a00; }

/* ---- 2026-09-29 利用者が選んだアイデア（声かけ・写真・読み上げ・今日送ったもの・お褒めの声・本棚）---- */
/* 完了報告の声かけ・はじめての人への案内 */
.news-item.call { border: 3px solid var(--danger); background: #fff5f5; }
.news-item.call-manual { border: 3px solid var(--primary); background: var(--primary-bg); }
.call-title { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: bold; color: var(--danger); }
.call-manual .call-title { color: var(--primary-dark); }
.call-text { margin: 8px 0 12px; line-height: 1.6; }
.news-item.call .btn, .news-item.call-manual .btn.primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; text-decoration: none; }
.call-manual .btn.quiet { display: block; margin: 10px auto 0; }
/* お知らせの写真・読み上げ */
.news-photo { display: block; margin: 10px 0 0; }
.news-photo img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.btn.speak-btn { margin-top: 10px; min-height: 52px; padding: 6px 14px; border: 2px solid var(--line-strong); background: #fff; color: var(--text); font-weight: bold; }
.btn.speak-btn[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
/* 今日送ったもの */
.home .sec-sent { margin-top: 24px; }
.home .sec-sent h2, .home .sec-praise h2 { font-size: 1.05rem; color: var(--text-sub); border-left: 4px solid var(--line-strong); }
.sent-empty { margin: 0; color: var(--text-sub); }
.sent-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); }
.sent-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.sent-list li:first-child { border-top: 0; }
.sent-time { font-weight: bold; min-width: 3.2em; }
.sent-kind { font-weight: bold; }
.sent-detail { color: var(--text-sub); flex: 1 1 auto; }
.sent-ok { color: var(--ok); font-weight: bold; }
.sent-list li.warn .sent-ok { color: var(--danger); }
/* お客様からのお褒めの声 */
.home .sec-praise { margin-top: 24px; }
.praise-body, .koe-body { margin: 0; padding: 14px; background: #fffdf2; border: 2px solid #e6c55a; border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.praise-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
/* 本棚 */
.shelf-cat { margin-top: 22px; }
.shelf-cat h2 { font-size: 1.15rem; }
.shelf-doc { margin-top: 10px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); }
.shelf-doc > summary { cursor: pointer; padding: 14px; font-size: 1.1rem; font-weight: bold; min-height: 52px; }
.shelf-doc[open] > summary { border-bottom: 1px solid var(--line); }
.shelf-doc-body { padding: 12px 14px 16px; }
.shelf-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; margin: 0 0 10px; }
.shelf-file { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-top: 6px; text-decoration: none; }
.shelf-img { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
.koe-item { margin-top: 14px; }
.koe-date { font-size: max(14px, 0.9rem); color: var(--text-sub); margin: 0 0 4px; }

/* ---- 送れていないもの（2026-09-30）：いちばん上に赤で大きく ---- */
.news-item.pending { border: 4px solid var(--danger); background: var(--danger-bg); }
.pending-title { font-size: 1.3rem; font-weight: 900; color: var(--danger); }
.pending-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pending-list li { padding: 10px 0; border-top: 1px solid #f3b8c0; }
.pending-list li:first-child { border-top: none; }
.pending-what { display: flex; flex-direction: column; gap: 2px; font-size: 1.05rem; line-height: 1.5; margin-bottom: 8px; }
.pending-what b { font-size: 1.15rem; }
.btn.pending-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; text-decoration: none; }
.sent-list li.warn { background: var(--danger-bg); font-size: 1.1rem; }
.sent-list li.warn .sent-ok { font-size: 1.1rem; }
/* 本棚の画面のメーカーのサイト（2026-09-30 トップから移した） */
.maker-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.btn.maker-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; text-decoration: none; font-weight: bold; background: #fff; border: 2px solid var(--line-strong); color: var(--text); }
.maker-link .maker-go { font-size: max(14px, 0.85rem); font-weight: normal; color: var(--text-sub); }

/* ============================================================
   2026-10-04 全体の確認（コンサルタント役・エンジニア役）で直した・足した見た目
   ============================================================ */
/* 結果の知らせ：色だけに頼らず、頭に印を付ける */
.notice.error::before { content: "⚠ "; }
.notice.ok::before { content: "✓ "; }
.notice.info { background: var(--primary-bg); color: var(--primary-dark); border: 2px solid var(--primary); }

/* 読み込めなかったとき：「もう一度読み込む」の大きなボタン */
.retry-box { padding: 16px; background: var(--danger-bg); border: 3px solid var(--danger); border-radius: var(--radius); margin-bottom: 8px; }
.retry-text { margin: 0 0 12px; font-size: 1.1rem; font-weight: bold; color: var(--danger); line-height: 1.6; }
.btn.retry-btn { display: block; width: 100%; min-height: 56px; }

/* お知らせ：押す所だと分かる一言／送れていないものの説明 */
.news-hint { margin: 12px 0 6px; font-size: 1rem; color: var(--text-sub); line-height: 1.5; }
.pending-note { margin: 6px 0 0; line-height: 1.6; }
.tag.todo { color: #7a3d00; background: #fff4dc; border-color: #b35c00; }

/* 「これまでのお知らせを見る」「ほかの声も見る」：文字だけのリンクから、押しやすいボタンへ */
.news-more { text-align: center; margin: 8px 0 0; }
.news-more a.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 8px 12px; font-size: 1.05rem; text-decoration: none; box-sizing: border-box; }
.praise-foot a.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; text-decoration: none; }

/* 写真：同じ画面の中で大きく見る（assets/photo.js） */
button.news-photo { display: block; width: 100%; padding: 0; margin: 10px 0 0; border: 2px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; overflow: hidden; text-align: center; font-family: inherit; }
button.news-photo img { margin: 0 auto; border: none; border-radius: 0; }
.news-photo-cap { display: block; padding: 8px; font-size: 1rem; font-weight: bold; color: var(--primary); }
dialog.photo-view { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 12px; border: none; background: #111; box-sizing: border-box; }
dialog.photo-view[open] { display: flex; flex-direction: column; gap: 12px; }
dialog.photo-view::backdrop { background: #111; }
.photo-view-img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
.btn.photo-view-close { flex: none; width: 100%; min-height: 60px; font-size: 1.2rem; }

/* 戻るボタン：長い画面のいちばん下にも／行き先を2つ並べるとき */
.back-bottom { margin: 28px 0 8px; }
.back-row { display: flex; flex-wrap: wrap; gap: 8px; }
.open-note { margin: 6px 0 0; }

/* ログインの説明：小さな灰色の字から、ふつうの大きさ・濃い字へ */
.sub.login-help { font-size: 1rem; color: var(--text); line-height: 1.6; }

/* トップの1行の案内の「設定する」（リンクでも、ボタンと同じ見た目） */
a.hint-how { display: inline-flex; align-items: center; text-decoration: none; }