/* ============================================================
   自治会アプリ（公式LINEなし版） 住民のページの共通の見た目（2026-11-11 Claude Design の E案＝アースカラーに作り替え）
   正本のデザイン: design/自治会アプリ 画面デザイン E.dc.html
   主な操作は明るい緑、地は砂色、目印は黄土色。見出しは Zen Maru Gothic、本文は BIZ UDPゴシック
   砂色の帯（下を丸く）の見出し → 生成りのカード → 緑のボタン・全画面で拡大する画面
   文字は rem、ボタンは min-height（OSの文字サイズ200%でも崩れないように）
   旧版（桜台の見た目）は design/hatani.css.旧
   制作・運営: 旗二でじたる
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Zen+Maru+Gothic:wght@500;700&display=swap");
:root {
  --font: "BIZ UDPGothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --font-h: "Zen Maru Gothic", "BIZ UDPGothic", "Hiragino Maru Gothic ProN", sans-serif;
  --paper: #F4EFE4; --card: #FBF8F1; --line: #DCD2C0; --line-2: #CFC3AD; --ink: #3A342B; --ink-2: #6A6052;
  --band: #E4DACA;
  --green: #3A8048; --green-dark: #2B6236; --green-pale: #E4EEDF;
  --ochre: #C99A4E; --ochre-ink: #7A5A1E; --ochre-pale: #EFE2C4;
  /* 旧い名前（各ページの style から使っている）も新しい色に向ける */
  --mint: var(--band); --mint-ink: var(--ink); --mint-ink-2: var(--green-dark);
  --teal: var(--green); --teal-dark: var(--green-dark); --teal-pale: var(--green-pale);
  --pink: #8A4A3C; --pink-dark: #6E3A2F;
  --red: #A8402A; --tel-ink: #4A3A22;
  --badge: var(--ochre-pale); --badge-ink: var(--ochre-ink);
  --r-s: .75rem; --r-m: 1rem; --r-l: 1.5rem; --r-pill: 999px;
  --shadow: 0 3px 0 var(--line);
  --btn-line: var(--line);
  --tone-a: #3A8048; --tone-a-pale: #E4EEDF; --tone-a-ink: #2B6236;
  --tone-b: #8A6420; --tone-b-pale: #EFE2C4; --tone-b-ink: #7A5A1E;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.app { max-width: 35rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
a { color: var(--green-dark); }
button { font: inherit; cursor: pointer; color: inherit; }

/* 見出しの帯（砂色・下を丸く） */
.hdr { background: var(--band); padding: 1.25rem 1.125rem 1.5rem; border-radius: 0 0 2rem 2rem; display: flex; flex-direction: column; gap: .875rem; }
.hdr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.org { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; color: var(--green-dark); }
.org img { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: #fff; }
.back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .375rem 1.125rem; border-radius: var(--r-pill); border: 1.5px solid var(--green); background: var(--card); color: var(--green-dark); font-size: 1rem; font-weight: 700; text-decoration: none; }
.title { margin: 0; font-family: var(--font-h); font-size: 1.75rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.badge { align-self: flex-start; padding: .375rem .875rem; border-radius: var(--r-pill); background: var(--badge); color: var(--badge-ink); font-size: .9375rem; font-weight: 700; }
/* 自治会からのお知らせ（画びょうで留めた紙） */
.notice { position: relative; margin: .375rem 0 0; padding: 1.125rem 1rem .875rem; border-radius: .5rem; background: var(--card); box-shadow: 0 2px 0 var(--line-2); line-height: 1.8; }
.notice::before { content: "自治会から"; display: block; font-family: var(--font-h); font-size: .9375rem; font-weight: 700; color: var(--green-dark); }
.notice::after { content: ""; position: absolute; top: -.625rem; left: 1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }

/* 本文 */
.main { flex: 1; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-l); padding: 1.125rem 1rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.lead { margin: 0 .25rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.b-h { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--font-h); font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: var(--green-dark); }
.b-h > svg { width: 1.5rem; height: 1.5rem; flex: none; }
.b-p { margin: 0; white-space: pre-line; line-height: 1.75; }
.state { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; background: var(--card); border-radius: var(--r-l); border: 2px dashed var(--line-2); color: var(--ink-2); font-weight: 700; }

/* ボタン（右に › の丸） */
.btns { display: flex; flex-direction: column; gap: .625rem; }
.btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3.75rem; padding: .75rem .875rem .75rem 1.125rem; border-radius: 1.25rem; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--font-h); font-size: 1.1875rem; line-height: 1.4; font-weight: 700; text-decoration: none; text-align: left; box-shadow: 0 3px 0 var(--line); }
.btn::after { content: "›"; flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.5rem; line-height: 1; padding-bottom: .15rem; }
.btn:active { transform: translateY(2px); box-shadow: none; background: var(--green-pale); }
.btn-tx { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.btn-note { font-family: var(--font); font-size: .875rem; line-height: 1.5; font-weight: 400; color: var(--ink-2); }

/* タイル（生成りの四角＋色つきの絵の枠。2つずつ。文字を大きくした端末では1列） */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .75rem; }
.tile { --tb: #D6EBD3; --tk: var(--green); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-width: 0; min-height: 8.5rem; padding: 1rem .625rem; border: 2px solid var(--line); border-radius: 1.75rem; background: var(--card); color: var(--ink); text-align: center; text-decoration: none; font-family: var(--font-h); font-size: 1.25rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 4px 0 var(--line); }
.tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.tile svg { width: 3.75rem; height: 3.75rem; padding: .75rem; flex: none; border-radius: 1.25rem; background: var(--tb); color: var(--tk); }
.tile .tile-note { font-family: var(--font); font-size: .875rem; font-weight: 400; color: var(--ink-2); line-height: 1.45; }
.tiles > .tile:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
/* 横に長いタイル（いちばん下の1つなど） */
.tiles > .tile.wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-height: 4.75rem; gap: .75rem; }
.tile.wide svg { width: 3rem; height: 3rem; padding: .5625rem; border-radius: 1rem; }
.tile.c-blue   { --tb: #D6EBD3; --tk: #3A8048; }
.tile.c-orange { --tb: #EFE2C4; --tk: #7A5A1E; }
.tile.c-green  { --tb: #E3E4D0; --tk: #5B6234; }
.tile.c-red    { --tb: #EBD3C8; --tk: #8E3B26; }
.tile.c-brown  { --tb: #E6DBCB; --tk: #6A4E34; }
.tile.c-pink   { --tb: #EAD7D0; --tk: #8A4A3C; }
.tile.c-purple { --tb: #DFDCD3; --tk: #55574A; }
.tile.c-sky    { --tb: #DCE4E2; --tk: #3F5F5A; }

/* 電話ボタン（2つずつ横に。番号は出さない） */
.tel-hint { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.tels { display: flex; flex-wrap: wrap; gap: .625rem; }
.tel { flex: 1 1 9rem; min-width: 0; min-height: 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: .625rem .75rem; border-radius: 1.25rem; border: 2px solid #D9C6A4; background: #F6EEDD; color: var(--tel-ink); text-decoration: none; text-align: center; font-family: var(--font-h); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; box-shadow: 0 3px 0 #D9C6A4; }
.tel small { font-family: var(--font); font-size: .875rem; font-weight: 400; }
.tel::before { content: "📞"; font-size: 1.25rem; }
.tel:active { transform: translateY(2px); box-shadow: none; }
.tel.wide { flex-basis: 100%; }

/* タブ（回覧｜市報等） */
.tabs { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: .75rem .75rem 0; }
.tabs-row { display: flex; align-items: flex-end; gap: .5rem; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .5rem; border: 2px solid; border-bottom: none; border-radius: var(--r-m) var(--r-m) 0 0; font-family: var(--font-h); font-size: 1.0625rem; font-weight: 700; text-align: center; }
.tab.is-active { flex: 1.35; min-height: 3.75rem; font-size: 1.375rem; color: #fff; }
.tab--a { border-color: var(--tone-a); background: var(--tone-a-pale); color: var(--tone-a-ink); }
.tab--a.is-active { background: var(--tone-a); color: #fff; }
.tab--b { border-color: var(--tone-b); background: var(--tone-b-pale); color: var(--tone-b-ink); }
.tab--b.is-active { background: var(--tone-b); color: #fff; }
.tabs-rule { height: 5px; border-radius: 3px; background: var(--tone-a); }
.tabs[data-view="b"] .tabs-rule { background: var(--tone-b); }

/* 表紙を2つずつ並べる（回覧の1枚ずつ・アルバム） */
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .875rem .75rem; }
.cov { display: flex; flex-direction: column; gap: .375rem; min-width: 0; padding: .375rem .375rem .625rem; border-radius: 1rem; border: 2px solid var(--line); background: var(--card); box-shadow: 0 3px 0 var(--line); text-align: left; color: var(--ink); }
.cov:active { transform: translateY(1px); box-shadow: none; }
.cov img, .cov .noimg { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; border-radius: .5rem; border: 1px solid #E6DECF; background: #EEE7D8; }
.cov.photo img { aspect-ratio: 4 / 3; object-position: center; }
.cov .noimg { display: flex; align-items: center; justify-content: center; color: var(--red); font-weight: 700; }
.cov-t { font-family: var(--font-h); font-size: 1rem; font-weight: 700; line-height: 1.45; padding: 0 .125rem; }
.cov-n { font-size: .875rem; color: var(--ink-2); padding: 0 .125rem; }

/* 写真を並べる */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.photos button { position: relative; display: block; padding: 0; border: none; background: none; border-radius: var(--r-s); }
.photos .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(43,98,54,.92); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.photos .play::before { content: ""; border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent #fff; margin-left: .2rem; }
.photos .vlen { position: absolute; right: .375rem; bottom: .375rem; padding: .05rem .5rem; border-radius: .375rem; background: rgba(0,0,0,.72); color: #fff; font-size: .8125rem; font-weight: 700; pointer-events: none; }
.viewer-video { display: block; width: 100%; max-height: 100%; margin: auto; background: #000; }
.photos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-s); background: #EEE7D8; }

/* 全画面で見る（左上「← もどる」とスマホの戻るで閉じる） */
.viewer { position: fixed; inset: 0; z-index: 10; background: #1F1C17; color: #fff; display: flex; flex-direction: column; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .625rem .75rem; background: #2E2A23; border-bottom: 1px solid #47413A; }
.viewer-back { flex: none; min-height: 3rem; padding: .5rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--card); background: var(--card); color: var(--green-dark); font-size: 1.0625rem; font-weight: 700; }
.viewer-title { flex: 1 1 8rem; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.viewer-body { flex: 1; overflow: auto; padding: .75rem; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: .75rem; }
.viewer-body img { display: block; width: 100%; height: auto; margin: 0 auto; background: #fff; flex: none; }
.viewer-zoom { display: flex; flex-wrap: wrap; gap: .75rem; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom)); background: #2E2A23; border-top: 1px solid #47413A; }
.zoom { flex: 1 1 7rem; min-height: 3.25rem; padding: .5rem; border-radius: var(--r-m); border: 1.5px solid #6A6052; background: #3A342B; color: #fff; font-size: 1.125rem; font-weight: 700; }
.zoom--in { background: var(--card); border-color: var(--card); color: var(--green-dark); }
.zoom:disabled { color: #8A8378; cursor: default; }
.viewer-pdf { display: block; color: #fff; text-align: center; padding: .5rem; font-weight: 700; }
body.viewing { overflow: hidden; }

/* 入力（1画面1問） */
.q { margin: 0; font-family: var(--font-h); font-size: 1.375rem; line-height: 1.45; font-weight: 700; color: var(--ink); }
.q-step { font-size: .9375rem; font-weight: 700; color: var(--green-dark); }
.inp { width: 100%; min-height: 3.5rem; padding: .75rem 1rem; border: 2px solid var(--line-2); border-radius: .875rem; background: var(--card); font: inherit; font-size: 1.25rem; }
.inp:focus { outline: 3px solid var(--green-pale); border-color: var(--green); }
.go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.75rem; padding: .75rem 1rem; border: none; border-radius: var(--r-pill); background: var(--green); color: #fff; font-family: var(--font-h); font-size: 1.25rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 var(--green-dark); }
.go:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--green-dark); }
.go:disabled { background: #A9A091; box-shadow: none; }
.sub { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; padding: .5rem 1rem; border: none; background: none; color: var(--ink-2); font-size: 1rem; text-decoration: underline; }
.err { margin: 0; color: var(--red); font-weight: 700; }

/* フッター */
.foot { padding: 1.25rem 1rem 1.75rem; text-align: center; color: var(--ink-2); font-size: .875rem; background: var(--band); }
.foot b { display: block; color: var(--green-dark); font-size: .9375rem; }