/* 受け口の画面（スマホで縦1列、大きいボタン。外から何も読み込まない）。 */
:root {
  --ji: #1b1f24;
  --haikei: #f6f7f9;
  --waku: #c9ced6;
  --botan: #1f5fbf;
  --botan-ji: #ffffff;
  --ayamari: #b3261e;
  --kanryo: #1e7a3c;
  --usui: #5b6470;
  --kado: #ffffff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ji: #e8eaed;
    --haikei: #15181c;
    --waku: #3a414b;
    --botan: #4f8ff0;
    --botan-ji: #0b0d10;
    --ayamari: #ff8a80;
    --kanryo: #7bd88f;
    --usui: #a3abb6;
    --kado: #1d2127;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--haikei);
  color: var(--ji);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 16px 16px 72px;
  display: flex;
  flex-direction: column;
}
section { display: flex; flex-direction: column; gap: 12px; }
section[hidden], [hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: 8px 0; }
label { font-weight: 600; }
input {
  font-size: 1.1rem;
  padding: 12px;
  border: 1px solid var(--waku);
  border-radius: 10px;
  background: var(--kado);
  color: var(--ji);
  width: 100%;
}
.kakusu { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
button, .erabu {
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 12px;
  border: 0;
  padding: 14px 16px;
  cursor: pointer;
  text-align: center;
}
.ookii { min-height: 64px; width: 100%; background: var(--botan); color: var(--botan-ji); }
.ookii[disabled] { opacity: 0.45; cursor: default; }
a.ookii { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.hikaeme { background: transparent; color: var(--botan); border: 2px solid var(--botan); }
button.hikaeme:not(.ookii) { min-height: 48px; width: 100%; }
progress { width: 100%; height: 28px; }
.setsumei { color: var(--usui); margin: 0; }
.ayamari { color: var(--ayamari); font-weight: 600; margin: 0; }
#ichiran { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#ichiran li {
  background: var(--kado);
  border: 1px solid var(--waku);
  border-radius: 12px;
  padding: 12px 14px;
}
.jotai { font-size: 1.25rem; font-weight: 700; }
.jotai.kanryo { color: var(--kanryo); }
.jotai.ayamari { color: var(--ayamari); }
.komaka { color: var(--usui); font-size: 0.95rem; }
.kensu { margin: 6px 0 0; padding-left: 1.2em; }
.shirase {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--kanryo);
  font-weight: 700;
}
/* 「アップ」「直し」のタブ（上に貼り付く。押しやすい大きさ） */
.tabu {
  display: flex;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--haikei);
  padding: 4px 0 10px;
}
.tabu-botan {
  flex: 1;
  min-height: 56px;
  background: transparent;
  color: var(--botan);
  border: 2px solid var(--botan);
}
.tabu-botan[aria-pressed="true"] { background: var(--botan); color: var(--botan-ji); }
h2 { font-size: 1.2rem; margin: 12px 0 0; }

/* 直し（住所の直しを送る） */
.n-nimotsu { display: flex; flex-direction: column; gap: 8px; }
.n-uketsuke {
  background: var(--kado);
  border: 1px solid var(--waku);
  border-radius: 12px;
  padding: 4px 12px;
}
.n-uketsuke summary { font-weight: 700; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.n-uketsuke ul { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.n-nimotsu-botan {
  width: 100%;
  min-height: 56px;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  background: var(--haikei);
  color: var(--ji);
  border: 1px solid var(--waku);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}
.n-jusho { font-weight: 700; overflow-wrap: anywhere; }
.n-namae { color: var(--usui); overflow-wrap: anywhere; }
.n-pin {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ayamari);
  border: 1px solid var(--ayamari);
  border-radius: 6px;
  padding: 0 6px;
}
.n-form { display: flex; flex-direction: column; gap: 10px; }
.n-moto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--botan);
  border-radius: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.n-sukusho-mihon { display: flex; flex-wrap: wrap; gap: 10px; }
.n-sukusho-mihon .mai { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 110px; }
.n-sukusho-mihon canvas { width: 100%; height: auto; border: 1px solid var(--waku); border-radius: 6px; }
.n-sukusho-mihon button { min-height: 44px; font-size: 1rem; }
.n-okutta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.n-okutta li {
  background: var(--kado);
  border: 1px solid var(--waku);
  border-radius: 12px;
  padding: 10px 14px;
  overflow-wrap: anywhere;
}
footer {
  position: fixed;
  right: 8px;
  bottom: 6px;
  font-size: 0.75rem;
  color: var(--usui);
  background: var(--haikei);
  padding: 2px 6px;
  border-radius: 6px;
}