/* そなえ（仮） アプリシェル（モバイルファースト） ブランド＝地震/防災のアンバー（黄色系）・シンプル＆洗練・線画アイコン。 */ :root{ --amber:#E09400; --amber-ink:#7a4e00; --amber-soft:#fbe6a6; --on-accent:#231c07; /* 旧トークン名はアンバー系へ再マップ（既存参照をそのまま活かす） */ --navy:#2b2314; --blue:#E09400; --blue-2:#7a4e00; --cyan:#9c6600; --safe:#1aa179; --warn:#E6950B; --danger:#dc2626; --bg:#faf7ef; --card:#ffffff; --line:#ece3d0; --text:#211c12; --muted:#897f69; } @media (prefers-color-scheme: dark){ :root{ --amber:#F7C948; --amber-ink:#f7c948; --amber-soft:#2a2410; --on-accent:#1a1505; --navy:#e9e2cf; --blue:#F7C948; --blue-2:#f3c23a; --cyan:#e3a93a; --bg:#15130d; --card:#1f1b12; --line:#312a1b; --text:#f1ecdd; --muted:#a79c83; } } *{ box-sizing:border-box; } html,body{ margin:0; } body{ /* 既定フォント＝BIZ UDPGothic優先（ユニバーサルデザイン書体・読みやすさ重視／Windowsに同梱）。無い端末は順にシステム書体へ。 */ font-family: "BIZ UDPGothic", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* ---- ヘッダー（モバイル＝白基調・シンプル） ---- */ .app-header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--card); color:var(--text); border-bottom:1px solid var(--line); } .app-header__logo{ width:28px; height:28px; display:block; } .app-header__logo img{ width:100%; height:100%; border-radius:7px; display:block; } .app-header__title{ font-weight:800; font-size:1.2rem; letter-spacing:-.01em; } /* ブランド書体＝Comfortaa（自己ホスト・オフライン可）。ロゴタイプ Sonae／「o」＝アンバー */ @font-face{ font-family:'Comfortaa'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/comfortaa-600.woff2') format('woff2'); } .brand-word{ font-family:'Comfortaa','Zen Kaku Gothic New',system-ui,sans-serif; font-weight:600; letter-spacing:-.01em; } .brand-o{ color:var(--amber); } .nav-brand-ic{ width:30px; height:30px; border-radius:7px; flex:none; display:block; } .app-header__dot{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); } .app-header__dot i{ width:8px; height:8px; border-radius:50%; background:var(--safe); display:inline-block; } body.is-offline .app-header__dot i{ background:var(--warn); } .offline-banner{ display:none; background:var(--warn); color:#2b2007; font-weight:700; font-size:.85rem; padding:8px 14px; text-align:center; } body.is-offline .offline-banner{ display:block; } .app-main{ padding:16px 14px 24px; max-width:720px; margin:0 auto; } /* ページ切替のフェードイン */ @keyframes viewFadeIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } } .view-fade{ animation:viewFadeIn .22s ease-out both; } @media (prefers-reduced-motion: reduce){ .view-fade{ animation:none; } } .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(43,35,20,.05); } .card h2{ margin:0 0 6px; font-size:1.08rem; letter-spacing:.01em; } .card p{ margin:6px 0; color:var(--muted); line-height:1.6; font-size:.92rem; } .badge{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--amber-soft); color:var(--amber-ink); } .notice{ border-left:3px solid var(--amber); background:var(--amber-soft); color:var(--text); border-radius:10px; padding:11px 13px; font-size:.86rem; } /* 設定ページ：災害時の注意事項カード（★紙保管の推奨を強調） */ .set-notice-btn{ border-color:var(--amber); color:var(--amber-ink); font-weight:700; } .set-notice-body{ max-width:640px; } .set-notice-h4{ margin:18px 0 6px; font-size:.95rem; font-weight:800; color:var(--amber-ink); border-bottom:1px solid var(--amber); padding-bottom:4px; } /* 氏名（姓・名）の入力欄は長くしすぎない（全幅化で伸びるのを防ぐ）。狭い画面では flex 縮小で収まる。 */ .set-name-row .inp{ max-width:240px; min-width:0; } .set-notice-paper{ margin:0 0 10px; padding:10px 12px; background:var(--amber-soft); border-left:4px solid var(--danger); border-radius:8px; color:var(--text); font-weight:800; font-size:.9rem; line-height:1.55; } .set-notice-ul{ margin:0; padding-left:1.25em; font-size:.84rem; color:var(--muted); line-height:1.6; } .set-notice-ul li{ margin:3px 0; } /* ---- ナビ（モバイル＝下部バー） ---- */ .app-nav{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(7,1fr); background:var(--card); border-top:1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .nav-brand, .nav-foot, .nav-clock, .nav-resp{ display:none; } /* デスクトップのみ表示 */ .app-nav button{ appearance:none; border:0; background:none; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 1px; font-size:.63rem; font-weight:700; cursor:pointer; min-height:56px; } .app-nav .ic{ display:inline-flex; align-items:center; justify-content:center; } .app-nav .ic svg{ width:22px; height:22px; stroke-width:1.7; } .app-nav button[aria-current="page"]{ color:var(--amber-ink); } /* ---- フォーム / ボタン ---- */ .app-main h3{ margin:0 0 6px; font-size:.98rem; } .muted{ color:var(--muted); font-size:.86rem; } .lbl{ display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin:10px 0 4px; } .inp{ width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); font:inherit; font-size:16px; } .inp:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); } textarea.inp{ resize:vertical; } .btn{ appearance:none; border:0; border-radius:10px; background:var(--amber); color:var(--on-accent); font-weight:800; font-size:.95rem; padding:12px 16px; cursor:pointer; min-height:44px; } .btn:hover{ filter:brightness(.96); } .btn--ghost{ background:transparent; color:var(--amber-ink); border:1.5px solid var(--line); } .btn--ghost:hover{ border-color:var(--amber); } .btn--sm{ padding:7px 12px; min-height:0; font-size:.85rem; } .formmsg{ margin-top:8px; font-size:.85rem; color:var(--danger); min-height:1em; } /* 通知対象の設定（津波予報区・火山の複数選択） */ .ap-list{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px; } .ap-cb{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; padding:4px 10px; border:1px solid var(--line); border-radius:999px; cursor:pointer; background:var(--card); } .ap-cb input{ margin:0; flex:none; } .ap-cb:has(input:checked){ border-color:var(--amber); background:var(--amber-soft); color:var(--amber-ink); font-weight:700; } .ap-grp{ width:100%; margin-top:8px; } .ap-grp-t{ font-size:.76rem; font-weight:800; color:var(--muted); margin:0 0 4px; } .ap-more{ margin-top:10px; } .ap-more>summary{ cursor:pointer; font-weight:700; font-size:.88rem; color:var(--amber-ink); } .ap-more-body{ margin-top:8px; max-height:280px; overflow:auto; padding-right:4px; } /* .ap-vols: 火山リストは内側スクロールなし＝全件そのまま表示（max-height/overflow 廃止） */ .loc-zip{ display:flex; gap:8px; align-items:center; } .loc-zip .inp{ flex:1 1 auto; } .loc-zip .btn{ flex:none; white-space:nowrap; } /* 地域分割市（南部/北部 等）の該当地域チューザ */ .loc-subs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 2px; } .loc-subs__q{ font-size:.8rem; font-weight:700; color:var(--muted); } .loc-sub{ flex:none; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:.9rem; font-weight:700; border-radius:999px; padding:7px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .loc-sub:hover{ border-color:var(--amber); } .loc-sub.is-on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); } /* 自動確定時の畳んだサマリ＋手動変更リンク */ .loc-sum{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:12px 0 2px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--amber-soft); } .loc-sum__main{ display:flex; flex-direction:column; gap:1px; min-width:0; } .loc-sum__t{ font-size:.72rem; font-weight:700; color:var(--muted); } .loc-sum__v{ font-size:1.02rem; font-weight:800; color:var(--text); } .loc-edit{ flex:none; border:0; background:transparent; color:var(--amber-ink); font-size:.86rem; font-weight:800; cursor:pointer; padding:4px 2px; text-decoration:underline; text-underline-offset:2px; } .loc-edit:hover{ opacity:.8; } a{ color:var(--amber-ink); } .code{ font-family:ui-monospace,monospace; font-weight:800; font-size:1.3rem; letter-spacing:.12em; background:var(--amber-soft); color:var(--text); padding:6px 12px; border-radius:8px; display:inline-block; } .sec{ padding:9px 0; border-top:1px solid var(--line); } .sec:first-of-type{ border-top:0; } .sec__h{ font-weight:700; } .sec__b{ color:var(--text); font-size:.9rem; line-height:1.6; margin-top:3px; } .tag{ font-size:.68rem; font-weight:800; background:var(--amber-soft); color:var(--amber-ink); padding:1px 7px; border-radius:999px; } /* ====================================================================== デスクトップ（PC版）：サイドバーを主役に・白基調・アンバーのアクセント ====================================================================== */ @media (min-width:1024px){ body{ padding-bottom:0; display:grid; min-height:100vh; grid-template-columns:264px minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"nav topbar" "nav banner" "nav main"; } .app-header{ display:none; } /* ブランドはサイドバーへ */ .offline-banner{ grid-area:banner; } .app-main{ grid-area:main; max-width:1040px; margin:0; padding:28px 36px 60px; } /* 下部バー → 左サイドバー */ .app-nav{ grid-area:nav; position:sticky; top:0; align-self:start; height:100vh; overflow:auto; left:auto; right:auto; bottom:auto; grid-template-columns:none; display:flex; flex-direction:column; gap:3px; padding:0 12px 16px; border-top:0; border-right:1px solid var(--line); background:var(--card); } .nav-brand{ display:flex; align-items:center; gap:9px; height:56px; padding:0 10px; margin:0 0 8px; border-bottom:1px solid var(--line); font-weight:800; font-size:1.14rem; letter-spacing:.02em; color:var(--text); /* ★ロゴ部分の高さを右上の上部バー(min-height:56px)に揃える（下線も揃えて一直線に） */ } .nav-brand svg{ width:27px; height:27px; color:var(--amber); flex:none; } .app-nav button{ flex-direction:row; justify-content:flex-start; gap:12px; width:100%; min-height:44px; padding:9px 12px; border-radius:10px; font-size:.9rem; color:var(--muted); } .app-nav .ic svg{ width:21px; height:21px; } .app-nav button:hover{ background:var(--bg); color:var(--text); } .app-nav button[aria-current="page"]{ background:var(--amber-soft); color:var(--amber-ink); box-shadow:inset 3px 0 0 var(--amber); } .nav-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:14px 12px 13px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); } .nav-foot-id{ min-width:0; line-height:1.55; } .nav-foot strong{ display:block; color:var(--text); font-size:.86rem; font-weight:800; margin-bottom:5px; } .nav-foot-role{ display:inline-block; margin-top:3px; font-size:.66rem; font-weight:800; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 8px; white-space:nowrap; vertical-align:middle; } .nav-foot-ai{ flex:none; font-size:.72rem; font-weight:800; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap; font-variant-numeric:tabular-nums; } .nav-foot-ai.is-over{ color:#c0392b; border-color:#c0392b; } .nav-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--safe); margin-right:7px; vertical-align:middle; } body.is-offline .nav-dot{ background:var(--warn); } /* 発災対応/訓練の進行中インジケータ（時計の上・対応画面へ） */ .nav-resp:not([hidden]){ display:block; margin-top:auto; margin-bottom:10px; padding:10px 12px; border-radius:12px; background:#fdeaea; border:1px solid #f3b4b4; } .nav-resp--drill{ background:#fff4e0; border-color:#f0cf93; } .nav-resp:not([hidden]) + .nav-clock{ margin-top:0; } /* #navResp は hidden でもDOMに残り隣接指定が効くため :not([hidden]) で限定。非表示時は .nav-clock の margin-top:auto を活かし下端固定 */ .nav-resp-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; } .nav-resp-m{ font-size:.78rem; font-weight:800; color:#c0362c; } .nav-resp--drill .nav-resp-m{ color:#9a6b00; } /* ★#navResp は .app-nav 内＝「.app-nav button」(0,1,1) に負けるため「.nav-resp .nav-resp-go」(0,2,0) で上書き＋flex/min-heightをリセット */ .nav-resp .nav-resp-go{ flex:none; width:auto; display:inline-block; min-height:0; appearance:none; border:0; border-radius:7px; background:var(--danger); color:#fff; font-weight:800; font-size:.66rem; line-height:1.2; padding:4px 9px; cursor:pointer; white-space:nowrap; } .nav-resp--drill .nav-resp-go{ background:var(--amber); color:var(--on-accent); } .nav-resp .nav-resp-go:hover{ filter:brightness(1.05); } .nav-resp-t{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); line-height:1.1; margin:4px 0 0; } /* 本番の対応中ピル＝上部「災害対応モード中」帯と同じ赤の色調（2026-10-25・上部赤帯をピルへ集約） */ .nav-resp--live:not([hidden]){ background:#c0362c; border-color:#a62d24; } .nav-resp--live .nav-resp-m{ color:#fff; } .nav-resp--live .nav-resp-t{ color:#fff; } .nav-resp--live .nav-resp-go{ background:#fff; color:#c0362c; } .nav-resp--live .nav-resp-go:hover{ background:#ffecec; filter:none; } .nav-resp-u{ font-size:.92rem; font-weight:700; margin-left:6px; opacity:.85; vertical-align:baseline; } /* タイマー右の「経過」＝タイマーよりやや小さめ */ .nav-resp-time{ display:inline-block; min-width:4.4em; text-align:left; } /* 時刻を固定幅＝秒更新で「経過」が左右にちらつかない（HH:MM:SSの最大幅） */ /* サイドバー下部のデジタル時計＋年月日（neuron風） */ .nav-clock{ display:block; margin-top:auto; padding:10px 12px 8px; } .nav-clock + .nav-foot{ margin-top:0; } .nav-clock-t{ font-size:1.95rem; font-weight:800; letter-spacing:.01em; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.05; } .nav-clock-s{ font-size:1.02rem; font-weight:700; color:var(--muted); margin-left:1px; } .nav-clock-d{ font-size:.95rem; font-weight:700; color:var(--muted); margin-top:3px; } #bcpRoot{ max-width:820px; } .app-main > .card{ max-width:820px; } /* ログイン/オンボーディング中はヘッダでブランド表示 */ body.nav-hidden{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; grid-template-areas:"head" "banner" "main"; } body.nav-hidden .app-header{ display:flex; } body.nav-hidden .app-main{ max-width:440px; margin:40px auto; } } /* ★背の低いノートPC：左サイドバーが縦スクロールしないよう、ナビ・時計をさらに圧縮（高さベース＝背の高い画面は従来のゆとりを維持）。2026-10-27 */ @media (min-width:1024px) and (max-height:830px){ .app-nav{ gap:1px; padding:0 12px 8px; } /* ★ロゴは圧縮せず56px固定を維持（上余白0でバーと一直線）。空間はボタン側で確保。 */ .app-nav button{ min-height:33px; padding:5px 12px; font-size:.86rem; } .app-nav .ic svg{ width:19px; height:19px; } .nav-clock{ padding:3px 12px 2px; } .nav-clock-t{ font-size:1.55rem; } .nav-clock-s{ font-size:.82rem; } .nav-clock-d{ font-size:.82rem; margin-top:1px; } .nav-foot{ padding:6px 12px; font-size:.72rem; } .nav-foot strong{ font-size:.8rem; margin-bottom:2px; } .nav-foot-role{ margin-top:2px; } } @media (min-width:1024px) and (max-height:710px){ .app-nav button{ min-height:30px; padding:4px 12px; font-size:.84rem; } .app-nav .ic svg{ width:18px; height:18px; } .nav-clock-t{ font-size:1.42rem; } .nav-clock-d{ font-size:.8rem; } } /* 中間幅（タブレット）＝レール縮約（アイコン中心） */ @media (min-width:768px) and (max-width:1023px){ body{ padding-bottom:0; display:grid; min-height:100vh; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"nav topbar" "nav banner" "nav main"; } .app-header{ display:none; } .offline-banner{ grid-area:banner; } .app-main{ grid-area:main; max-width:900px; margin:0; padding:22px 22px 52px; } .app-nav{ grid-area:nav; position:sticky; top:0; align-self:start; height:100vh; overflow:auto; left:auto; right:auto; bottom:auto; grid-template-columns:none; display:flex; flex-direction:column; gap:4px; padding:14px 6px; border-top:0; border-right:1px solid var(--line); background:var(--card); } .nav-brand{ display:flex; align-items:center; justify-content:center; padding:4px 0 12px; } .nav-brand svg{ width:26px; height:26px; color:var(--amber); } .nav-brand span{ display:none; } .app-nav button{ flex-direction:column; gap:3px; min-height:54px; font-size:.58rem; padding:8px 2px; border-radius:10px; color:var(--muted); } .app-nav button[aria-current="page"]{ background:var(--amber-soft); color:var(--amber-ink); } #bcpRoot{ max-width:760px; } .app-main > .card{ max-width:760px; } body.nav-hidden{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; grid-template-areas:"head" "banner" "main"; } body.nav-hidden .app-header{ display:flex; } body.nav-hidden .app-main{ max-width:440px; margin:32px auto; } } /* ====================================================================== 機能C：掲示板＋伝言板・安否 ====================================================================== */ .bd-seg{ display:flex; gap:8px; margin-bottom:14px; } .bd-seg button{ flex:1; appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:800; font-size:.9rem; padding:10px 12px; border-radius:10px; cursor:pointer; min-height:44px; } .bd-seg button.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .bd-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:6px; } .bd-row > div{ flex:1; min-width:160px; } .bd-check{ display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700; color:var(--muted); padding-bottom:10px; } /* 緊急情報：対象の選択（ボタン・最初に選ぶ・既定は未選択） */ .bd-aud{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 2px; } .bd-aud-btn{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--text); font-weight:800; font-size:.9rem; padding:11px 18px; border-radius:10px; cursor:pointer; min-height:46px; flex:1 1 auto; } .bd-aud-btn.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .bd-mail-hint{ font-size:.78rem; margin:2px 0 0; } /* 緊急情報：発報待ちバナー＋管理ボタン（発報と機能統合） */ .al-pend-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-color:var(--danger); background:rgba(220,38,38,.06); margin-bottom:16px; } .al-pend-txt{ font-size:.92rem; line-height:1.5; } .bd-mgr{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } /* 緊急情報：会員への通知オプション */ .bd-notify{ display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .bd-notify .nt-check{ margin:0; } .bd-notify-sub{ padding-left:24px; } .bd-notify-sub.is-disabled{ opacity:.5; } /* 「緊急情報を送る」パネル＝赤枠で目立たせる */ .bd-send-card{ position:relative; border:2px solid var(--danger); box-shadow:0 1px 3px rgba(220,38,38,.12); padding-top:22px; margin-top:12px; } /* 「緊急情報を送る」タイトルは、ホームの緊急情報ボックス同様に枠線上へ（サイレン付き・.emg-title/.emg-sirenを再利用） */ /* 本文入力欄を広めに（上下幅を大きく＋手動リサイズ可） */ #bdBody_in{ min-height:240px; resize:none; } /* 右下の拡大ハンドルを出さない（実際に広がらないため）。説明文を省いた分、本文欄を拡大 */ /* 送信ボタンは右寄せ */ .bd-send-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; } /* 件名「必須」ラベル */ .lbl-req{ display:inline-block; margin-left:7px; font-size:.68rem; font-weight:800; color:#fff; background:var(--danger); padding:2px 6px; border-radius:4px; vertical-align:middle; letter-spacing:.03em; } /* 災害カテゴリ・バッジ（色はインラインstyleで指定：文字色C／背景C+alpha／枠C+alpha） */ .cat-badge{ display:inline-block; font-size:.66rem; font-weight:800; padding:2px 7px; border-radius:5px; border:1px solid; line-height:1.35; white-space:nowrap; vertical-align:middle; } /* カテゴリ選択チップ（緊急情報フォーム・定型文フォーム共通） */ .bd-cats{ display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 2px; } .bd-cat{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:700; font-size:.82rem; padding:7px 13px; border-radius:999px; cursor:pointer; min-height:40px; } .bd-cat.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } /* 定型文カードのカテゴリ表示 */ .al-cats{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; } /* 一覧の送信列：自動送信ラベル */ .blt-auto-tag{ display:inline-block; font-size:.72rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border:1px solid var(--amber); padding:2px 7px; border-radius:5px; } .blt-table .blt-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:2px; } /* 一覧の行＝クリックで詳細モーダル */ .blt-table tbody tr.blt-tr{ cursor:pointer; } .blt-table tbody tr.blt-tr:hover > td{ background:rgba(127,127,127,.08); } /* 緊急情報モーダル内のメタ情報（送信元・対象・送信者/日時） */ .blt-modal-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .blt-modal-when{ font-size:.82rem; } /* 対応アーカイブ／表示範囲の操作行 */ .bd-listctrl{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .sup-table tbody tr.ar-row:hover > td{ background:var(--amber-soft); } /* 対応アーカイブ：全面モーダル（緊急情報モーダル=.wx-modal z3000 より下＝通知詳細がその上に重なる） */ .bd-armodal{ position:fixed; inset:0; z-index:2000; background:rgba(20,16,8,.5); display:flex; align-items:center; justify-content:center; padding:3vh 3vw; } .bd-arbox{ background:var(--card); width:100%; max-width:880px; max-height:92vh; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 14px 50px rgba(0,0,0,.4); } .bd-arhead{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); flex:none; } .bd-arhead strong{ flex:1 1 auto; min-width:0; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-arclose{ flex:none; appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:8px; width:34px; height:34px; font-size:1.2rem; line-height:1; cursor:pointer; } .bd-arclose:hover{ border-color:var(--navy); } .bd-arbody{ flex:1 1 auto; min-height:0; overflow:auto; padding:14px 16px; } .bd-arbody .card:first-child{ margin-top:0; } /* 対応アーカイブの見出し＝種別バッジ（訓練／災害）＋災害種別 */ .bd-archhead-h{ display:flex; align-items:center; gap:8px; margin:0; flex-wrap:wrap; } .bd-archhead-h .drill-mode{ flex:none; } /* 対応アーカイブ＝種別バッジ付きの自作ドロップダウン（details・メニューは絶対配置でボタン直下＋右揃え） */ .bd-archdd{ position:relative; margin-left:auto; max-width:min(300px,100%); } .bd-archdd-btn{ display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; list-style:none; user-select:none; } .bd-archdd-btn::-webkit-details-marker{ display:none; } .bd-archdd-btn::marker{ content:''; } /* マウスで開閉しても amber の枠(.inp:focus)が残らないよう、強調はキーボード操作時のみ＝全プルダウンの見た目を統一 */ .bd-archdd-btn:focus{ outline:none; border-color:var(--line); box-shadow:none; } .bd-archdd-btn:focus-visible{ border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); } .bd-archdd-cur{ display:flex; align-items:center; gap:8px; min-width:0; } .bd-archdd-cur .drill-mode, .bd-archdd-opt .drill-mode{ flex:none; } .bd-archdd-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-archdd-ph{ color:var(--muted); white-space:nowrap; } .bd-archdd-caret{ margin-left:auto; color:var(--muted); font-size:.78rem; flex:none; } .bd-archdd-menu{ position:absolute; top:calc(100% + 4px); right:0; left:auto; z-index:60; min-width:100%; width:max-content; max-width:min(440px,78vw); background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(43,35,20,.16); padding:6px; max-height:360px; overflow:auto; } .bd-archdd-opt{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; appearance:none; border:0; background:transparent; border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--text); font-size:.9rem; line-height:1.35; } .bd-archdd-opt:hover{ background:var(--bg); } .bd-archdd-opt.is-sel{ background:var(--amber-soft); } /* 安否一覧：表の右上にツール（対応アーカイブ＋ダウンロード）を右寄せ */ .sr-list-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; margin-bottom:8px; } .sr-list-head h3{ margin:0; } .sr-list-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; } .sr-list-tools .bd-archdd{ margin-left:0; max-width:none; } .bd-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } /* 絞込ピル行＋右端に対応アーカイブ（＆ダウンロード） */ .bd-pills-row{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-bottom:12px; } .bd-pills-row .bd-pills{ margin-bottom:0; } .bd-pills-row .bd-listctrl{ margin-left:auto; margin-bottom:0; gap:8px; } .bd-pill{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:700; font-size:.82rem; padding:7px 14px; border-radius:999px; cursor:pointer; } .bd-pill.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .blt-feed{ display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:12px; } /* 緊急情報：左＝入力欄／右＝履歴一覧（職員のみ2カラム） */ .blt-wrap{ display:grid; gap:16px; grid-template-columns:1fr; } .blt-history{ min-width:0; } .blt{ margin:0; } .blt__body{ line-height:1.6; font-size:.95rem; } .blt__meta{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; } .blt__ops{ margin-top:10px; display:flex; gap:8px; } .blt--pinned{ border-color:var(--amber); box-shadow:0 1px 3px rgba(242,177,0,.18); } .blt__pin{ font-weight:800; color:var(--amber-ink); font-size:.78rem; margin-bottom:6px; } .blt__title{ font-weight:800; font-size:1rem; margin-bottom:4px; } /* 送信一覧＝表形式 */ .blt-table td{ vertical-align:top; } .blt-table th.blt-th-ops{ text-align:right; } .blt-table .blt-td-content{ min-width:260px; } .blt-table .blt-pin-ic{ margin-right:4px; } .blt-table .blt-tt{ font-weight:800; } .blt-table .blt-when{ margin-left:auto; font-size:.74rem; color:var(--muted); white-space:nowrap; font-weight:400; } /* 送信日時＝タイトル行の右端 */ .blt-table .blt-bd{ line-height:1.55; font-size:.9rem; margin-top:2px; } .blt-table .blt-ml{ margin-top:4px; } .blt-table .blt-td-aud, .blt-table .blt-td-meta{ white-space:nowrap; } .blt-table .blt-td-meta{ font-size:.82rem; } .blt-table .blt-td-ops{ white-space:nowrap; text-align:right; } .blt-table tr.blt-tr--pinned > td{ background:var(--amber-soft); } .blt-table tr.blt-tr--pinned:hover > td{ background:var(--amber-soft); } .tag--staff{ background:var(--amber-soft); color:var(--amber-ink); } .tag--family{ background:rgba(20,120,130,.14); color:#0e7490; } .tag--all{ background:rgba(43,35,20,.08); color:var(--text); } .nav-badge{ display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; background:var(--danger); color:#fff; font-size:.66rem; font-weight:800; border-radius:999px; padding:0 5px; margin-left:auto; } /* 右端に表示 */ .nav-badge--count{ background:var(--safe); } /* 安否登録数＝情報系（緑） */ .msg-wrap{ display:grid; gap:16px; grid-template-columns:1fr; } .sf-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; } .sf-btns--2{ grid-template-columns:repeat(2,1fr); } .sf-btn{ appearance:none; border:2px solid var(--line); background:var(--card); color:var(--text); font-weight:800; font-size:1.12rem; padding:20px 8px; border-radius:14px; cursor:pointer; min-height:76px; } .sf-btn--safe.is-on{ border-color:var(--safe); background:rgba(26,161,121,.12); color:#0a7a59; } .sf-btn--help.is-on{ border-color:var(--danger); background:rgba(220,38,38,.12); color:#b91c1c; } .sf-btn--unknown.is-on{ border-color:var(--muted); background:rgba(137,127,105,.14); } .sf-summary{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .sf-reveal{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:0 0 10px; } /* サマリ（左）＋解錠ボタン（右・表の右上）のツールバー */ .sf-toolbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 16px; flex-wrap:wrap; margin-bottom:8px; } .sf-toolbar .sf-summary{ margin:0; } .sf-toolbar .sf-reveal{ margin:0; justify-content:flex-end; } .sr-td-contact{ font-size:.82rem; white-space:nowrap; } /* 発災対応中の職員「緊急情報」解錠ブロック（2層プライバシー・監査あり） */ .sf-priv{ margin-top:12px; } .sf-priv-note{ font-size:.76rem; color:var(--danger); background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.25); border-radius:9px; padding:6px 10px; margin-bottom:10px; } .sf-priv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; } .sf-priv-card{ border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--card,#fff); } .sf-priv-card--none{ opacity:.7; } .sf-priv-name{ font-weight:800; font-size:.9rem; display:flex; align-items:center; gap:6px; margin-bottom:6px; } .sf-priv-kind{ font-size:.66rem; font-weight:700; color:var(--muted); background:var(--chip,#f1f1f3); border-radius:999px; padding:1px 7px; } .sf-priv-empty{ margin:4px 0 0; font-size:.8rem; } .sf-priv-row{ display:flex; gap:7px; font-size:.8rem; line-height:1.5; padding:1px 0; } .sf-priv-k{ flex:0 0 4.2em; color:var(--muted); font-weight:700; } .sf-priv-v{ flex:1 1 auto; min-width:0; word-break:break-word; } .sf-priv-care{ color:var(--danger); font-weight:700; } .fam-ctnote{ font-size:.78rem; margin:8px 0 2px; } .sf-chip{ display:inline-block; font-size:.74rem; font-weight:800; padding:2px 10px; border-radius:999px; background:rgba(43,35,20,.08); color:var(--muted); } .sf-chip--safe{ background:rgba(26,161,121,.15); color:#0a7a59; } .sf-chip--help{ background:rgba(220,38,38,.15); color:#b91c1c; } .sf-chip--unknown{ background:rgba(137,127,105,.16); color:var(--muted); } /* 安否一覧の「安否」列＝無事／被害ありを目立たせる（塗り＋白文字・大きめ） */ .sr-td-safe .sf-chip{ font-size:.92rem; font-weight:800; padding:4px 15px; border-radius:8px; } .sr-td-safe .sf-chip--safe{ background:var(--safe); color:#fff; } .sr-td-safe .sf-chip--help{ background:var(--danger); color:#fff; } .sr-td-safe .sf-chip--unknown{ background:rgba(137,127,105,.18); color:var(--muted); } /* サマリ＝クリックで絞り込み（選択中は枠線を自色で表示） */ .sf-sum-btn{ cursor:pointer; appearance:none; -webkit-appearance:none; font-family:inherit; border:1.5px solid transparent; } .sf-sum-btn:hover{ filter:brightness(.96); } .sf-sum-btn.is-on{ border-color:currentColor; } .sf-roster{ display:flex; flex-direction:column; gap:2px; } .sf-rrow{ display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-top:1px solid var(--line); } .sf-rrow:first-child{ border-top:0; } .sf-rrow--help{ background:rgba(220,38,38,.06); border-radius:8px; } .sf-name{ font-weight:700; font-size:.9rem; } .msg-list{ display:flex; flex-direction:column; gap:10px; } .msg-item{ border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--card); } .msg-item--all{ border-left:3px solid var(--amber); } .msg-item--mine{ background:var(--amber-soft); } .msg-item--pending{ opacity:.7; border-style:dashed; } .msg-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.8rem; } .msg-from{ font-weight:800; } .msg-text{ margin-top:5px; line-height:1.55; font-size:.92rem; } .msg-ops{ margin-top:7px; } /* 災害時の報告（設定＋職員入力・集計） */ .bd-admin{ display:flex; justify-content:flex-end; margin-bottom:10px; } .sr-cfg-tabs{ display:flex; gap:8px; margin:6px 0 14px; } .sr-cfg-tab{ flex:1; appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:800; font-size:.85rem; padding:9px 10px; border-radius:10px; cursor:pointer; min-height:0; } .sr-cfg-tab.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .sr-cfg-grp{ margin:0 0 8px; } .sr-cfg-item{ border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; display:flex; flex-direction:column; gap:8px; } .sr-cfg-row2{ display:flex; gap:8px; align-items:center; } .sr-cfg-row2 .sr-c-type{ width:auto; min-width:118px; flex:none; } .sr-cfg-row2 .btn{ margin-left:auto; } .sr-cfg-act{ margin-top:4px; } .sr-dg-k{ color:var(--muted); font-weight:700; font-size:.82rem; } /* 報告：入力／一覧の切替 */ .msg-seg{ display:flex; gap:8px; margin:0 0 14px; } /* 切替ボタンと「災害時の報告項目を設定」を同じ行に */ .msg-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .msg-head-row .msg-seg{ flex:1 1 auto; margin:0; max-width:620px; } .msg-head-row > .btn{ flex:none; white-space:nowrap; } .msg-seg-btn{ flex:1; appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:800; font-size:.9rem; padding:11px 10px; border-radius:12px; cursor:pointer; } .msg-seg-btn.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .msg-input{ display:grid; gap:16px; grid-template-columns:1fr; max-width:620px; } .msg-listview{ display:flex; flex-direction:column; gap:16px; } /* 入力：安否＋報告を1カードにまとめる（報告セクションの区切り） */ .sr-rep-sec{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } /* 安否報告クローズ中の案内 */ .sr-closed{ text-align:center; padding:28px 20px; } .sr-closed-ic{ font-size:2rem; line-height:1; margin-bottom:20px; } .sr-closed h3{ margin:4px 0 8px; } .sr-closed p{ max-width:540px; margin:6px auto; } .sr-closed-act{ display:flex; justify-content:center; margin-top:14px; } /* 一覧：職員／利用者・家族の切替 */ .sr-who{ display:flex; gap:8px; margin:0 0 12px; } .sr-who-btn{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:800; font-size:.82rem; padding:7px 14px; border-radius:999px; cursor:pointer; } .sr-who-btn.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } /* 一覧テーブル（安否＋報告） */ .sr-table td.sr-empty{ text-align:center; color:var(--muted); padding:16px 12px; } .sr-table td.sr-td-name{ font-weight:700; white-space:nowrap; } .sr-td-sub{ font-weight:400; font-size:.76rem; margin-top:2px; line-height:1.3; white-space:normal; } /* 名前セル副行＝続柄・紐づく利用者（識別補助） */ .sr-table td.sr-td-kind{ color:var(--muted); font-size:.82rem; white-space:nowrap; } .sr-table td.sr-td-time{ color:var(--muted); font-size:.82rem; white-space:nowrap; font-variant-numeric:tabular-nums; } .sr-table td.sr-td-rep{ line-height:1.5; min-width:200px; } .sr-table tr.sr-tr--help > td{ background:rgba(220,38,38,.06); } .sr-table tr.sr-tr--help:hover > td{ background:rgba(220,38,38,.1); } .sr-table tr.sr-sub > td, .sr-table tr.sr-sub:hover > td{ background:var(--bg); color:var(--muted); font-weight:800; font-size:.76rem; padding:6px 12px; letter-spacing:.04em; } @media (min-width:1024px){ .msg-wrap{ grid-template-columns:minmax(300px,380px) 1fr; align-items:start; } .blt-wrap{ grid-template-columns:minmax(400px,560px) 1fr; align-items:start; } .blt-feed{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } .blt-feed--pinned{ grid-template-columns:1fr; } /* 掲示板＝全幅。フィードは複数列で右端まで活用、上部コントロール/伝言板は読みやすい幅に抑える */ .app-main.board-wide{ max-width:none; } .app-main.board-wide .blt-feed{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); align-items:start; } .app-main.board-wide .blt-feed--pinned{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); } /* 緊急情報：入力欄を広め＋右側（送信一覧＝表）は空きを活かして全幅 */ .app-main.board-wide .blt-wrap{ max-width:1600px; } .app-main.board-wide .bd-seg, .app-main.board-wide #bdBody > .card{ max-width:900px; } .app-main.board-wide .msg-wrap{ max-width:1200px; } .app-main.board-wide .msg-head-row{ max-width:none; } .app-main.board-wide .msg-listview{ max-width:none; } /* 安否一覧の表は画面右端まで */ } /* ====================================================================== 機能D：手動一斉通知 ====================================================================== */ .nt-check{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--text); margin-top:12px; } .nt-feed{ display:grid; gap:12px; grid-template-columns:1fr; } .nt-item{ margin:0; } .nt-item--unread{ border-color:var(--amber); box-shadow:0 1px 3px rgba(242,177,0,.18); } .nt-title{ font-weight:800; font-size:1rem; margin-bottom:4px; } .nt-body{ line-height:1.6; font-size:.95rem; } .nt-meta{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; } .nt-status{ margin-top:8px; font-size:.78rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .nt-mailstat{ color:#0a7a59; font-weight:700; } /* メール送信結果：クリック可能なステータス＋結果モーダル */ .blt-mailbtn{ appearance:none; border:1px solid transparent; background:transparent; font:inherit; color:#0a7a59; font-weight:700; cursor:pointer; padding:2px 7px; border-radius:7px; display:inline-flex; align-items:center; gap:4px; } .blt-mailbtn:hover:not([disabled]){ background:#e6f4ee; border-color:#bfe3d4; } .blt-mailbtn[disabled]{ cursor:default; } .blt-mailmore{ color:var(--muted); font-weight:800; } .mres{ display:flex; flex-direction:column; gap:14px; } .mres-sec{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .mres-h{ font-weight:800; font-size:.9rem; padding:9px 13px; } .mres-h--ok{ background:#e6f4ee; color:#0a7a59; } .mres-h--ng{ background:#fdeaea; color:#c0362c; } .mres-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 13px; border-top:1px solid var(--line); font-size:.9rem; } .mres-name{ font-weight:700; display:flex; align-items:center; gap:7px; min-width:0; } .mres-kind{ font-size:.68rem; font-weight:700; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:1px 7px; } .mres-mail{ color:var(--muted); font-size:.82rem; white-space:nowrap; } .mres-empty{ padding:10px 13px; color:var(--muted); border-top:1px solid var(--line); } .mres-note{ font-size:.8rem; color:var(--muted); line-height:1.6; margin:0; } .nt-ops{ margin-top:10px; } @media (min-width:1024px){ .nt-feed{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } } /* ====================================================================== 機能E：緊急発報＋自動ルール ====================================================================== */ .al-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .al-name{ font-weight:800; font-size:1rem; } .al-title{ margin-top:6px; font-weight:700; font-size:.92rem; } .al-body{ margin-top:4px; line-height:1.6; font-size:.92rem; } .al-ops{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; } .al-fire, .al-fire-go, .pend-fire{ background:var(--danger); color:#fff; } .al-fire-panel, .pend-prev{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); } .pend{ border-left:3px solid var(--danger); } .pend-head{ font-weight:800; font-size:1rem; } .ru-warns{ display:flex; flex-direction:column; gap:4px; margin-top:4px; } @media (min-width:1024px){ #alertsRoot > .card{ max-width:760px; } } /* 機能B拡張：災害別BCP（PDF） */ input[type=file].inp{ padding:9px 10px; font-size:.85rem; } .bcpf-list{ margin-top:8px; } .bcpf-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); } .bcpf-row:first-child{ border-top:0; } .bcpf-name{ font-weight:700; font-size:.92rem; } .bcpf-ops{ display:flex; gap:8px; flex:none; } /* ====================================================================== ホーム（防災ダッシュボード） ====================================================================== */ .home-hero{ background:linear-gradient(135deg, var(--amber-soft), var(--card)); } .home-state{ display:inline-block; font-size:.74rem; font-weight:800; color:#0a7a59; background:rgba(26,161,121,.14); padding:2px 10px; border-radius:999px; margin-bottom:6px; } .home-h{ margin:18px 2px 8px; font-size:.9rem; color:var(--muted); font-weight:800; letter-spacing:.02em; } .home-foot{ margin:6px 2px 0; font-size:.68rem; color:var(--muted); line-height:1.55; flex:0 0 auto; } .wx-warnarea{ font-size:.78rem; margin:-2px 0 8px; } /* ホーム：ワイド画面は2カラムのダッシュボード（左＝ヒーロー/災害/週間、右レーン＝新着/気象/地震） */ .home-grid2{ display:flex; flex-direction:column; gap:14px; } .home-col{ display:contents; } /* モバイルは各セクションを縦積み（.ha の order で順序制御） */ .ha{ min-width:0; } .home-grid2 .home-h{ margin-top:0; } .home-grid2 .card{ margin-bottom:0; } /* ホーム下部の広告枠（アフィリエイト等・PR）。SONAE_HOME_AD にHTMLがあれば表示、無ければプレースホルダ。 */ .home-ad{ margin:0; } .home-ad-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:72px; padding:3px 10px 8px; border-radius:14px; text-align:center; } /* 上部余白を短く（8→3px・2026-10-24） */ .home-ad-box--ph{ border:1px dashed var(--line); background:var(--card); } .home-ad-label{ align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.1em; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } /* 「広告」は左端に（2026-10-24） */ .home-ad-ph{ font-size:.85rem; color:var(--muted); margin:0; } .home-ad-content{ width:100%; overflow:hidden; text-align:center; } .home-ad-content--multi{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:flex-start; overflow:visible; } /* 広告2枠を横並び（狭い画面はwrapで縦積み） */ .home-ad-content--multi > .home-ad-cell{ flex:1 1 300px; min-width:0; } /* 等幅2枠。各枠300px未満になる幅では縦積み */ .home-ad-cell{ overflow:hidden; text-align:center; min-width:0; } .home-ad-cell > table{ display:inline-table; } /* 外側テーブルを中央寄せ。固定幅広告は scaleAdBox(JS) が枠幅に合わせ縮小 */ .home-ad-cell img{ max-width:100%; height:auto; } @media (min-width:1024px){ .app-main.home-wide{ max-width:none; } .app-main.sup-wide{ max-width:none; } } /* 設定ページ：横幅を広げて右余白を活用。基本設定カードは段組み（2カラム）、フォーム中心のタブは読みやすい幅に制限、権限設定の表は全幅。 */ @media (min-width:1024px){ .app-main.set-wide{ max-width:1400px; } .set-wide .set-basic-grid{ columns:2; column-gap:20px; max-width:1200px; } .set-wide .set-basic-grid > *{ break-inside:avoid; margin:0 0 16px; } /* 予報通知・個人プロフィール・施設プロフィールは全幅＝説明文・選択肢（チェックボックス）を右余白まで使って1行表示（改行を減らす）。入力欄だけは読みやすい幅に制限。 */ .set-wide .set-panel input.inp, .set-wide .set-panel select.inp{ max-width:560px; } .set-wide .set-panel textarea.inp{ max-width:820px; } .set-wide .set-panel .mp-phone .inp{ max-width:8.5em; } /* 電話3欄は従来の幅に戻す（全幅化で伸びて見づらいのを防ぐ） */ .set-wide .set-panel .set-name-row .inp{ max-width:240px; } /* 氏名（姓・名）も全幅化で伸びすぎないよう制限（汎用 .set-name-row 規則が上の input.inp cap に負けるため再指定） */ /* 言語・パスワードは単機能タブ＝カードが間延びしないよう幅を抑える。 */ .set-wide .set-panel[data-set="lang"], .set-wide .set-panel[data-set="pw"]{ max-width:560px; } } @media (min-width:1200px){ .app-main.home-wide{ display:flex; flex-direction:column; padding:14px 22px; } /* 2カラム。グリッドが画面の高さを埋め、各カラムを同じ高さに伸ばす（右の地図はフィル）。左カラムは週間天気の下の広告枠(.home-ad)が残り高さを吸収。内容が画面より多ければ body が自然スクロール（内部スクロールは出さない）。 */ .home-grid2{ flex:1 1 auto; min-height:0; flex-direction:row; align-items:stretch; gap:16px; } .home-col{ display:flex; flex-direction:column; gap:14px; min-width:0; } .home-col--main{ flex:1 1 auto; } .home-col--rail{ flex:0 0 clamp(440px, 38%, 900px); } /* 右（地図＋最近の地震）＝大きい画面でも比率を保つ（左が広がっても地図が小さくなりすぎない） */ .home-grid2 .home-h{ max-width:none; } /* 地図：十分な高さを確保（画面高に応じて可変・上限あり） */ .ha:has(#homeMap){ display:flex; flex-direction:column; } .ha:has(#homeMap) #homeMap, .ha:has(#homeMap) .mw-card{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .ha:has(#homeMap) .mw-map{ flex:1 1 auto; height:auto; min-height:clamp(340px, 52vh, 620px); } /* 週間天気：自然な高さ（縦フィルしない＝間延びを防ぐ）。カードは wk-card グリッド（左=週間予報／右=実況）。各日タイルはアイコン・文字を大きめ＋高さに少し余裕（カード高さは実況212pxに律速＝横並びなので余裕内・2026-10-24）。 */ .ha:has(#homeWeek) .wk-day{ justify-content:center; gap:11px; padding-top:15px; padding-bottom:15px; } .ha:has(#homeWeek) .wk-day .wx-ic svg{ height:56px; width:auto; max-width:100%; } /* ★max-width:100%＝時々/のち等の横長アイコンが隣の日に被らない。大画面は各日枠に対しやや大きめ（2026-10-27・小ノートは下の max-height:830 で縮小） */ .ha:has(#homeWeek) .wk-dd{ font-size:.92rem; } .ha:has(#homeWeek) .wk-temp{ font-size:1rem; } .ha:has(#homeWeek) .wk-pop{ font-size:.98rem; } /* 天気カードを .ha の高さいっぱいに（syncNoticeHeight が .ha を高くすると、タイル行・実況も縦に広がる＝天気予報を高く・2026-10-24） */ .home-col--main .ha:has(#homeWeek){ display:flex; flex-direction:column; } .home-col--main .ha:has(#homeWeek) > #homeWeek{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } .home-col--main .ha:has(#homeWeek) #homeWeek > .wk-card{ flex:1 1 auto; align-content:stretch; } .home-col--main .ha:has(#homeWeek) .wk-days{ grid-auto-rows:1fr; } /* 日タイルの行をカード高さに合わせて伸ばす */ /* 右カラム＝地図と最近の地震で残り高さを分け合う。最近の地震の一覧だけ内部スクロール＝ページは非スクロール。 */ .app-main.pg-fill .pg-fit > .home-col--rail{ overflow:hidden; } /* 地図＝残り高さを吸収して拡大／最近の地震＝内容ぶんの高さ（件数が少なければ余白なし・多ければ一覧だけ内部スクロール） */ .home-col--rail .ha:has(#homeMap){ flex:1 1 auto; min-height:240px; } .home-col--rail .ha:has(#homeMap) .mw-map{ flex:1 1 auto; height:auto; min-height:clamp(280px, 38vh, 540px); } /* 地図＝右カラムの高さ超過でページがスクロールしないよう抑えめに（2026-10-26） */ .home-col--rail .ha:has(#homeQuake){ display:flex; flex-direction:column; flex:0 1 auto; min-height:0; padding-bottom:60px; } /* 右下のAI相談FAB（bottom:22px・高さ約48px）と地震の時刻が重ならないよう下に余白を確保（2026-10-24） */ .home-col--rail .ha:has(#homeQuake) > .home-h{ flex:none; } .home-col--rail .ha:has(#homeQuake) #homeQuake{ min-height:0; } .home-col--rail .ha:has(#homeQuake) #homeQuake > .card{ margin:0; } .home-col--rail .ha:has(#homeQuake) .q-scrolly{ max-height:clamp(140px, 22vh, 250px); overflow-y:auto; } /* 最近の地震＝約5行で内部スクロール。右カラムの高さを抑えページの縦スクロールを避ける（2026-10-26） */ /* 広告枠＝週間天気の下（左カラム内）で残り高さを吸収（上限あり）。右カラムは地図がフィル（従来どおり）。内容が多い画面では縮んでページが自然スクロール。 */ /* 広告は読みやすさ優先で幅のみ縮小（高さは縮めない）。枠は残り高さを吸収し、カードを中央に配置して左下の余白を埋める。内容が多い画面ではカードを縮めず body が自然スクロール。 */ .home-col--main .home-ad{ flex:0 0 auto; display:flex; flex-direction:column; margin-top:auto; } /* 広告＋出典をページ下部へ寄せる（上の余白を margin-top:auto が吸収）。天気を高くした残り余白がここに来る（ユーザー要望2026-10-24） */ .home-col--main .home-foot{ margin-top:-12px; } /* 出典を広告の直下へ寄せる（flex gap14 − 12 ＝実質2px。2026-10-24） */ } /* ★小さめノート（≥1200px かつ 背が低い＝max-height:830px）：週間天気を小さく＝詰まり感を軽減。大画面（背が高い）は上の ≥1200px の大きさを維持。2026-10-27 */ @media (min-width:1200px) and (max-height:830px){ .ha:has(#homeWeek) .wk-day{ gap:5px; padding-top:8px; padding-bottom:8px; } .ha:has(#homeWeek) .wk-day .wx-ic svg{ height:34px; } .ha:has(#homeWeek) .wk-dd{ font-size:.7rem; } .ha:has(#homeWeek) .wk-temp{ font-size:.72rem; } .ha:has(#homeWeek) .wk-pop{ font-size:.7rem; } } .home-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:4px; } .home-tile{ appearance:none; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:7px; font-weight:700; font-size:.82rem; color:var(--text); min-height:86px; justify-content:center; text-align:center; } .home-tile:hover{ border-color:var(--amber); background:var(--amber-soft); } .home-tile__ic{ display:inline-flex; } .home-tile__ic svg{ width:26px; height:26px; color:var(--amber-ink); } .hs-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-top:1px solid var(--line); cursor:pointer; } .hs-row:first-child{ border-top:0; } .hs-label{ font-weight:700; font-size:.92rem; } .hs-val{ font-size:.86rem; color:var(--muted); font-weight:700; } .hs-val--alert{ color:var(--danger); } .hs-sub{ font-size:.78rem; color:var(--muted); padding:2px 2px 6px; } /* ホーム「緊急情報」＝赤枠＋左上にサイレン＋タイトル（枠に被せる）。見出し文字は廃止。 */ .emg-box{ position:relative; border:2px solid var(--danger); border-radius:14px; padding:22px 16px 16px; background:var(--card); margin-top:18px; box-shadow:0 1px 3px rgba(220,38,38,.12); display:flex; flex-direction:column; justify-content:center; } .emg-box #homeStatus .card{ border:0; background:transparent; box-shadow:none; padding:0; margin:0; } /* タイトルは枠線上に中央配置。背景はクリーム→白のグラデ（枠上＝クリーム／枠内＝白）で、はみ出し部分が背景になじむ。 */ .emg-title{ position:absolute; top:0; left:16px; transform:translateY(-50%); display:inline-flex; align-items:center; gap:7px; background:linear-gradient(to bottom, var(--bg) 0 50%, var(--card) 50% 100%); padding:3px 12px; font-weight:800; font-size:1.08rem; color:var(--danger); } .emg-siren{ display:inline-flex; } .emg-siren svg{ width:25px; height:25px; display:block; } /* 未読=赤背景・白文字／既読=薄いグレーのバッジ（タイトル先頭） */ .emg-badge{ display:inline-block; font-size:.7rem; font-weight:800; line-height:1; padding:3px 7px; border-radius:5px; margin-right:9px; vertical-align:middle; letter-spacing:.03em; } .emg-badge--unread{ background:var(--danger); color:#fff; } .emg-badge--read{ background:var(--line); color:var(--muted); } .emg-none{ margin:4px 2px; font-size:.9rem; } /* 緊急情報の各タイトルを目立たせる（フォントサイズは据え置き＝太字・濃色・行間広め） */ .emg-box .hs-row{ padding-top:13px; padding-bottom:13px; } .emg-box .hs-label{ font-weight:800; color:var(--text); letter-spacing:.01em; min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .emg-box .hs-val{ font-weight:700; flex:none; white-space:nowrap; } .emg-box .hs-row{ border-radius:8px; transition:background .12s; } .emg-box .hs-row:hover{ background:rgba(220,38,38,.055); } /* 施設からのお知らせ＝緊急情報の下・緑枠（緊急情報ボックスと同デザイン）。常に1件を書き換える。 */ .an-box{ position:relative; border:2px solid #16a34a; border-radius:14px; padding:22px 16px 16px; background:var(--card); margin-top:12px; box-shadow:0 1px 3px rgba(22,163,74,.12); display:flex; flex-direction:column; justify-content:center; } .an-box-title{ position:absolute; top:0; left:16px; transform:translateY(-50%); display:inline-flex; align-items:center; gap:7px; background:linear-gradient(to bottom, var(--bg) 0 50%, var(--card) 50% 100%); padding:3px 12px; font-weight:800; font-size:1.08rem; color:#16a34a; } .an-ico{ display:inline-flex; } .an-ico svg{ width:24px; height:24px; display:block; } .an-box-body{ white-space:pre-wrap; word-break:break-word; line-height:1.8; color:var(--text); } .an-box-meta{ margin-top:10px; font-size:.76rem; color:var(--muted); text-align:right; } /* 未入力時はメッセージを枠の上下中央（.an-boxのjustify-center）＋左寄せ */ .an-box--empty{ align-items:flex-start; text-align:left; } .an-box--empty .an-none{ margin:0; } .an-edit-btn{ position:absolute; top:10px; right:12px; appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.76rem; font-weight:800; padding:4px 11px; border-radius:999px; cursor:pointer; } .an-edit-btn:hover{ border-color:#16a34a; color:#16a34a; } .an-none{ margin:2px; font-size:.92rem; } .an-form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; } /* 緊急情報モーダル（該当通知の詳細）＝緊迫感を出すため赤系デザイン */ .wx-modal--emg .wx-sheet{ border:1.5px solid var(--danger); box-shadow:0 12px 34px rgba(220,38,38,.30); } .wx-modal--emg .wx-sheet-head{ background:var(--danger); border-bottom-color:var(--danger); } .wx-modal--emg .wx-sheet-head strong{ color:#fff; display:inline-flex; align-items:center; gap:8px; } .wx-modal--emg .wx-sheet-head strong::before{ content:"⚠️"; font-size:1.05em; line-height:1; } .wx-modal--emg .wx-close{ color:#fff; opacity:.95; } .emg-detail-time{ color:var(--danger); font-size:.85rem; font-weight:700; margin-bottom:12px; } .emg-detail-body{ white-space:pre-wrap; word-break:break-word; line-height:1.8; color:var(--text); } .q-list{ display:flex; flex-direction:column; gap:4px; } /* 過去12時間分をスクロールで遡れるリスト */ .q-scrolly{ max-height:clamp(180px, 26vh, 320px); overflow-y:auto; overscroll-behavior:contain; padding-right:2px; } .q-row{ display:flex; align-items:center; gap:10px; } /* クリックで震度分布図に表示（行全体がボタン） */ .q-row--btn{ width:100%; text-align:left; background:transparent; border:0; font:inherit; color:inherit; cursor:pointer; padding:8px 6px; border-radius:10px; } .q-row--btn:hover{ background:var(--amber-soft); } .q-row--btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--amber); } .q-row .q-info{ flex:1 1 auto; } /* 発生日時＝右側・上下中央（日付の下に時刻） */ .q-when{ flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:1px; text-align:right; white-space:nowrap; } .q-when-d{ font-size:.72rem; color:var(--muted); } .q-when-t{ font-size:.9rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; } /* 震度バッジ＝neuron/NHK準拠の配色（全ページ統一） */ .q-scale{ flex:none; min-width:60px; text-align:center; font-weight:800; font-size:.76rem; padding:5px 6px; border-radius:8px; background:#cbd5e1; color:#111; } .q-s20{ background:#4aa564; color:#fff; } .q-s30{ background:#f2e700; color:#000; } .q-s40{ background:#f39800; color:#000; } .q-s45,.q-s46,.q-s50{ background:#e60000; color:#fff; } .q-s55,.q-s60{ background:#f5a2b8; color:#c8000a; } .q-s70{ background:#a734d6; color:#fff; } .q-info{ display:flex; flex-direction:column; min-width:0; gap:1px; } .q-name{ font-weight:700; font-size:.9rem; } .q-meta{ font-size:.78rem; color:var(--text); } @media (min-width:1024px){ .home-grid{ grid-template-columns:repeat(6,1fr); max-width:820px; } .home-h{ max-width:820px; } } /* 災害の状況ボード（気象庁の警戒レベルで色分け・平時は白地黒文字） */ .haz-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } @media (min-width:600px){ .haz-grid{ grid-template-columns:repeat(8,1fr); } } .haz{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; aspect-ratio:1/1; max-height:128px; padding:8px 4px; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:#111827; min-width:0; } .haz-ic{ display:inline-flex; } .haz-ic svg{ width:30px; height:30px; } /* PNGアイコン（デザインAC等のモノクロPNG）：mix-blend-mode:multiply で白い内部塗り（家の壁・土砂等）を タイル色に馴染ませる（白→背景色・濃い線画はそのまま）。白タイル(平時/L0)は白×白＝変化なし、黄(注意報L2)は白→黄。 赤/紫/黒の警報タイル(L3+)は白へ反転して可読性維持（multiplyは無効化）。 */ .haz-ic .haz-png{ width:54px; height:54px; object-fit:contain; display:block; mix-blend-mode:multiply; } .haz-l3 .haz-png, .haz-l4 .haz-png, .haz-l5 .haz-png{ filter:brightness(0) invert(1); mix-blend-mode:normal; } .haz-name{ font-size:.76rem; font-weight:800; } .haz-st{ font-size:.62rem; font-weight:700; opacity:.78; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .haz-l2{ background:#f2e700; border-color:#d9cf00; color:#241f00; } .haz-l3{ background:#ff2800; border-color:#d81f00; color:#fff; } .haz-l4{ background:#aa00aa; border-color:#8e008e; color:#fff; } .haz-l5{ background:#0c0c0c; border-color:#000; color:#fff; } .haz-l2 .haz-st,.haz-l3 .haz-st,.haz-l4 .haz-st,.haz-l5 .haz-st{ opacity:.96; } .haz-note{ margin-top:11px; font-size:.8rem; } .haz-src{ margin-top:6px; font-size:.68rem; } /* カード内 下側：発表中の警報・注意報・情報 */ .haz-foot{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line); } .haz-alerts{ display:flex; flex-wrap:wrap; gap:7px; } .haz-alert{ display:inline-block; padding:5px 12px; border-radius:8px; font-size:.82rem; font-weight:800; line-height:1.3; } .haz-ok{ margin:0; font-size:.86rem; font-weight:700; color:#0a7a59; } .haz-hint{ margin:9px 0 0; font-size:.72rem; } /* 週間天気予報＋現在の実況（アメダス） */ .wk-card{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; } .wk-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .wk-day{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; padding:9px 1px; border:1px solid var(--line); border-radius:11px; min-width:0; } .wk-dd{ font-size:.58rem; font-weight:700; white-space:nowrap; } .wk-sun{ color:#dc2626; } .wk-sat{ color:#2563eb; } .wk-day .wx-ic{ display:inline-flex; } .wk-day .wx-ic svg{ height:30px; width:auto; max-width:100%; } .wk-temp{ font-size:.64rem; font-weight:700; white-space:nowrap; } .wk-tmax{ color:#d1431f; font-weight:800; } .wk-tmin{ color:#2f7dd1; font-weight:800; } .wk-temp--none{ color:var(--muted); font-weight:700; } .wk-pop{ font-size:.72rem; font-weight:700; color:var(--muted); } .wk-now{ border:1px solid var(--line); border-radius:14px; padding:11px 12px; background:var(--amber-soft); display:flex; flex-direction:column; gap:7px; } .wk-now-h{ font-size:.72rem; font-weight:700; color:var(--amber-ink); } .wk-now-temp{ font-size:1.7rem; font-weight:800; line-height:1; color:var(--text); } .wk-now-temp span{ font-size:.92rem; font-weight:700; margin-left:2px; } .wk-now-rows{ display:flex; flex-direction:column; gap:5px; } .wk-now-row{ display:flex; align-items:baseline; justify-content:space-between; font-size:.86rem; gap:10px; } .wk-now-row span{ color:var(--muted); font-size:.8rem; } .wk-now-row b{ font-weight:800; } .wk-src{ grid-column:1 / -1; margin:0; font-size:.68rem; color:var(--muted); } @media (min-width:720px){ .wk-card{ grid-template-columns:1fr 176px; align-items:stretch; } /* 実況（右）を狭めて週間予報（左）に横幅を確保＝アイコン/気温の被りを防ぐ（2026-10-27） */ .wk-now{ justify-content:space-between; } /* 背が高くなった分は上下に配分（現在・気温＝上／実況値＝下） */ .wk-days{ gap:6px; } .wk-dd{ font-size:.76rem; } .wk-day .wx-ic svg{ height:42px; width:auto; } .wk-temp{ font-size:.84rem; } .wk-pop{ font-size:.84rem; } } /* ★大画面（≥1200px かつ 背が高い＝min-height:831px）だけの微調整（2026-10-27・ユーザー要望）。 小さめノート（max-height:830px）には及ばない＝小画面向けの縮小表示をそのまま維持。 ★配置が重要：基本ルール（.wk-card の ≥720px 指定・上記）より後に置き、同特異度でも後勝ちで大画面だけ上書きする。 */ @media (min-width:1200px) and (min-height:831px){ /* 災害の状況：タイル内アイコンを大きく＝アイコン間の余白（隙間）を詰める */ .haz{ max-height:150px; } .haz-ic .haz-png{ width:70px; height:70px; } .haz-ic svg{ width:40px; height:40px; } /* 実況（週間天気カード右）をもう少し広く（小ノートは ≥720px の176pxを維持） */ .wk-card{ grid-template-columns:1fr 210px; } /* 実況の気温・湿度・風をもう少し大きく（大画面のみ・2026-10-27） */ .wk-now-h{ font-size:.82rem; } .wk-now-temp{ font-size:2.1rem; } .wk-now-temp span{ font-size:1.05rem; } .wk-now-row{ font-size:1rem; } .wk-now-row span{ font-size:.9rem; } } /* ====================================================================== 気象・防災情報（気象庁） ====================================================================== */ .wx-home .wx-now{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .wx-ic{ display:inline-flex; flex:none; } .wx-ic svg{ height:40px; width:auto; } /* 天気＝色付きタイルの複合バッジ（ウェザーニューズ型）。角丸は内部clipPath。サイズは .wx-ic svg と各コンテキスト指定に追従。 */ .wx-badge{ display:block; } .wx-today{ font-weight:800; font-size:1rem; } .wx-warns{ display:flex; gap:6px; flex-wrap:wrap; } .wx-warn{ display:inline-block; font-size:.74rem; font-weight:800; padding:3px 10px; border-radius:999px; } /* ★正本の警戒レベル色（config.js sonaeLevelColor）とソリッドで統一：特別=黒/危険=紫/警報=赤/注意報=黄 */ .wx-warn--sp{ background:#0c0c0c; color:#fff; } .wx-warn--d{ background:#aa00aa; color:#fff; } .wx-warn--w{ background:#ff2800; color:#fff; } .wx-warn--a{ background:#f2e700; color:#241f00; } .wx-ok{ font-size:.84rem; color:#0a7a59; font-weight:700; } .wx-modal{ position:fixed; inset:0; z-index:3000; background:rgba(20,16,8,.5); display:flex; align-items:flex-end; justify-content:center; } /* z-index はLeaflet地図のペイン/コントロール(〜1000)より上に */ /* ★モーダル/全面オーバーレイ表示中は背景（本体ページ）をスクロールさせない。オーバーレイは position:fixed のため overflow:hidden でも現在のスクロール位置は保持される。全モーダルが .wx-modal／.bcp-fsmodal／.bd-armodal のいずれかを使うため :has() で一括ロック。 */ html:has(.wx-modal), html:has(.bcp-fsmodal), html:has(.bd-armodal), body:has(.wx-modal), body:has(.bcp-fsmodal), body:has(.bd-armodal){ overflow:hidden; } .wx-sheet{ background:var(--card); width:100%; max-width:640px; max-height:88vh; border-radius:18px 18px 0 0; display:flex; flex-direction:column; overflow:hidden; } .wx-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); } .wx-sheet-head strong{ font-size:1.02rem; } .wx-close{ appearance:none; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 6px; } .wx-body{ padding:14px 16px 24px; overflow:auto; overscroll-behavior:contain; } /* アプリ内ダイアログ（confirm/alert/prompt の置き換え）＝最前面・中央・小型 */ .wx-modal--dlg{ z-index:4000; align-items:center; padding:4vh 16px; } .wx-sheet--dlg{ max-width:440px; border-radius:16px; } .wx-sheet--dlg .wx-body{ padding:16px; display:flex; flex-direction:column; gap:14px; } .dlg-msg{ font-size:.92rem; line-height:1.7; color:var(--text); } .dlg-input{ width:100%; box-sizing:border-box; } .dlg-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:2px; } .dlg-actions .btn{ min-width:96px; } .dlg-danger{ background:var(--danger); color:#fff; } /* 複数選択肢（縦積み）＝sonaeChoose */ .dlg-choices{ display:flex; flex-direction:column; gap:9px; } .dlg-choice{ width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; line-height:1.3; } .dlg-choice-h{ font-size:.76rem; font-weight:600; opacity:.85; } .dlg-back{ align-self:flex-start; appearance:none; border:0; background:none; color:var(--muted); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; padding:4px 2px; margin-top:2px; } .dlg-back:hover{ color:var(--text); text-decoration:underline; } /* 発災対応フローのモーダル（安否入力／緊急情報送信） */ .bd-fmodal .wx-sheet{ max-width:560px; } .bd-fmodal-act{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; } .bd-fmodal-act .btn{ min-width:110px; } /* アカウント種別ごとの権限一覧（ページ右上ボタン＋モーダル内の表） */ .pm-pagehead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .pm-pagehead .seg-tabs{ margin-bottom:0; } .pm-open{ margin-left:auto; white-space:nowrap; } .pm-legend{ font-size:.82rem; color:var(--muted); margin:0 0 12px; line-height:1.9; } .pm-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .pm-table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:460px; } .pm-table th, .pm-table td{ padding:7px 6px; border-bottom:1px solid var(--line); text-align:center; vertical-align:top; } .pm-table thead th{ position:sticky; top:0; background:var(--card); font-weight:700; font-size:.78rem; white-space:nowrap; } .pm-table th.pm-feat, .pm-table td.pm-feat{ text-align:left; min-width:176px; } td.pm-feat{ font-weight:600; } .pm-rownote{ font-weight:400; font-size:.73rem; color:var(--muted); margin-top:2px; line-height:1.45; } .pm-m{ color:var(--amber); font-weight:800; } .pm-y{ color:var(--amber); font-weight:700; } .pm-v{ color:var(--warn); font-weight:700; } .pm-n{ color:var(--muted); } .pm-tail{ font-size:.78rem; margin:12px 0 0; line-height:1.65; } /* 統合ビューのセグメントタブ（コラム・交流／家族・アカウント） */ .seg-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px; } .seg-tab{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-weight:700; font-size:.9rem; border-radius:999px; padding:7px 17px; cursor:pointer; } .seg-tab.is-on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); } /* アカウント管理：タブ切替と操作ボタン（招待リンク/職員を追加・利用者家族を追加）を同じ行に。 */ .combo-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; } .combo-head .seg-tabs{ margin:0; } .combo-actions{ display:flex; gap:8px; flex-wrap:wrap; flex:none; margin-left:auto; } .combo-actions .btn{ flex:none; white-space:nowrap; } .set-toggle{ display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; margin-top:4px; } .set-toggle input{ width:20px; height:20px; flex:none; } /* 設定ページのタブ（基本設定／プロフィール／権限設定）。タブ切替でパネルを出し分け。 */ .set-panel[hidden]{ display:none; } /* 各項目の見出しを目立たせる（アンバーの左アクセント＋ネイビー・大きめ） */ .set-panel .card > h2, .set-panel .card > h3{ font-size:1.12rem; color:var(--navy); border-left:4px solid var(--amber); padding-left:11px; margin:0 0 12px; line-height:1.35; } .wx-h{ margin:16px 0 8px; font-size:.86rem; color:var(--muted); font-weight:800; } .wx-h:first-child{ margin-top:2px; } .wx-days{ display:flex; gap:8px; } .wx-day{ flex:1; border:1px solid var(--line); border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; } .wx-dlabel{ font-weight:800; font-size:.82rem; } .wx-day .wx-ic svg{ height:32px; width:auto; } .wx-dw{ font-size:.78rem; color:var(--muted); } .wx-ov{ font-size:.88rem; line-height:1.7; color:var(--text); } .wx-links{ display:flex; flex-direction:column; gap:2px; } .wx-link{ display:block; padding:11px 2px; border-top:1px solid var(--line); font-weight:700; font-size:.92rem; color:var(--amber-ink); text-decoration:none; } .wx-link:first-child{ border-top:0; } /* 雨雲レーダー（気象庁ナウキャスト＋国土地理院地図） */ .wx-radar{ position:relative; width:100%; max-width:400px; aspect-ratio:1/1; margin:4px auto 0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#eef2f7; } .wx-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); } .wx-cellt{ position:relative; overflow:hidden; } .wx-tile{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; } .wx-tile--ov{ opacity:.62; } .wx-pin{ position:absolute; transform:translate(-50%,-100%); pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); } .wx-pin svg{ width:24px; height:24px; display:block; } .wx-radar-t{ position:absolute; right:7px; bottom:7px; background:rgba(15,12,6,.66); color:#fff; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:7px; letter-spacing:.02em; } .wx-radar-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.86rem; text-align:center; padding:0 16px; } .wx-radarlink{ display:block; text-align:center; margin:9px auto 0; max-width:400px; font-size:.84rem; font-weight:700; color:var(--amber-ink); text-decoration:none; } .wx-mapbtns{ display:flex; gap:8px; flex-wrap:wrap; } /* 災害地図モーダル（震度分布図・津波情報図／Leaflet） */ .hm-modal{ position:fixed; inset:0; z-index:200; background:rgba(20,16,8,.55); display:flex; align-items:center; justify-content:center; } .hm-sheet{ background:var(--card); width:100%; height:100%; max-width:880px; display:flex; flex-direction:column; overflow:hidden; } .hm-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); } .hm-head strong{ font-size:1rem; } .hm-close{ appearance:none; border:0; background:none; font-size:1.7rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 6px; } .hm-map{ flex:1; min-height:0; position:relative; background:#eef2f7; } .hm-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; text-align:center; padding:0 20px; z-index:401; } .hm-cap{ padding:10px 14px; font-size:.73rem; color:var(--muted); line-height:1.55; border-top:1px solid var(--line); } .hm-cap b{ color:var(--text); } .hm-sh span{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-weight:800; font-size:.82rem; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.45); box-sizing:border-box; } .hm-epi{ color:#dc2626; font-size:20px; font-weight:900; line-height:28px; text-align:center; text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; } @media (min-width:640px){ .hm-sheet{ height:auto; max-height:92vh; border-radius:16px; } .hm-map{ height:64vh; min-height:440px; } } /* 地図ウィジェット（ホーム右側・雨雲/台風/震度分布/津波 タブ切替） */ .mw-card{ padding:0; overflow:hidden; } .mw-tabs{ display:flex; border-bottom:1px solid var(--line); overflow-x:auto; } .mw-tab{ flex:1 0 auto; appearance:none; border:0; background:none; padding:9px 7px; font-size:.75rem; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; } .mw-tab.is-on{ color:var(--amber-ink); border-bottom-color:var(--amber); background:var(--amber-soft); } .mw-map{ position:relative; width:100%; height:300px; background:#eef2f7; } .mw-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; text-align:center; padding:0 16px; z-index:401; } /* 「発表・発生なし」を地図中央に重ねる案内（気象庁HPにならう）。地図は常に明色なので固定色でOK。 */ .mw-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:600; max-width:88%; background:rgba(255,255,255,.95); color:#1f2937; border:1px solid #d7d2c4; border-radius:10px; padding:11px 15px; font-size:.86rem; font-weight:700; line-height:1.6; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.14); pointer-events:none; } .mw-cap{ padding:9px 12px; font-size:.68rem; color:var(--muted); line-height:1.6; } .mw-cap b{ color:var(--text); } .mw-cap-src{ float:right; padding-left:12px; } /* 出典のみ右端へ（取得時間・凡例は左のまま・2026-10-27） */ .mw-cap .mw-leg{ color:var(--muted); font-size:.64rem; } /* 震度分布タブ：地図内・右下の要点ボックス（最大震度/震源地/M/深さ/発生日時）。帰属表示は左下へ逃がして右下を空けている。地図は常に明色タイルなので固定の明色配色でOK。 */ .mw-infobox{ position:absolute; left:8px; bottom:8px; z-index:600; max-width:min(64%,230px); background:rgba(255,255,255,.95); border:1px solid #d7d2c4; border-radius:10px; padding:0 10px 8px; box-shadow:0 2px 10px rgba(0,0,0,.18); pointer-events:none; font-size:.72rem; line-height:1.4; color:#1f2937; overflow:hidden; } /* 最大震度ヘッダ＝ボックス上辺の全幅カラーバー（震度の配色。bg/文字色はインライン指定） */ .mw-eqinfo-head{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin:0 -10px 8px; padding:6px 10px; border-radius:9px 9px 0 0; } .mw-eqinfo-si-l{ font-size:.72rem; font-weight:800; color:inherit; } .mw-eqinfo-si{ font-size:1.42rem; font-weight:800; line-height:1; color:inherit; } .mw-eqinfo-dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 9px; } .mw-eqinfo-dl > div{ display:contents; } .mw-eqinfo-dl dt{ margin:0; color:#6b7280; font-weight:700; white-space:nowrap; } .mw-eqinfo-dl dd{ margin:0; font-weight:800; color:#111827; } /* 台風タブ（複数台風の切替）＝ボックス上部。タブのみクリック可（ボックス本体は pointer-events:none） */ .mw-typh-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding-top:7px; margin-bottom:7px; pointer-events:auto; } .mw-typh-tab{ appearance:none; cursor:pointer; border:1px solid #d7d2c4; background:#fff; color:#374151; border-radius:6px; padding:2px 8px; font-size:.7rem; font-weight:800; line-height:1.5; } .mw-typh-tab.is-on{ background:#111827; color:#fff; border-color:#111827; } .mw-typh-head{ justify-content:center; font-size:.86rem; font-weight:800; } /* 狭い地図（ノートPC/右レール）＝情報ボックスを縮小して地図を隠さない（render() が地図実寸<620pxで付与） */ .mw-infobox--sm{ max-width:min(50%,150px); padding:0 6px 5px; font-size:.56rem; line-height:1.3; } .mw-infobox--sm .mw-eqinfo-head{ margin:0 -6px 5px; padding:3px 6px; gap:4px; } .mw-infobox--sm .mw-eqinfo-si-l{ font-size:.56rem; } .mw-infobox--sm .mw-eqinfo-si{ font-size:.92rem; } .mw-infobox--sm .mw-eqinfo-dl{ gap:1px 5px; } .mw-infobox--sm .mw-eqinfo-dl dt{ font-size:.54rem; } /* ラベル列を細く＝発生日時(値)を1行に収めて縦を詰める */ .mw-infobox--sm .mw-typh-head{ font-size:.66rem; } .mw-infobox--sm .mw-typh-tabs{ padding-top:5px; margin-bottom:4px; gap:3px; } .mw-infobox--sm .mw-typh-tab{ padding:1px 5px; font-size:.56rem; } .mw-pin,.mw-typh,.mw-am{ background:none; border:0; } /* アメダスの観測値ラベル（点の中心に配置・色＝要素ごとのスケール） */ .mw-am > span{ display:inline-flex; align-items:center; gap:3px; transform:translate(-50%,-50%); font-size:13.5px; font-weight:800; color:#fff; padding:3px 9px; border-radius:10px; border:2px solid #fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.65); box-shadow:0 1px 4px rgba(0,0,0,.35); } .mw-am-arr{ display:inline-block; font-size:15px; line-height:1; transform-origin:50% 50%; } /* アメダスの要素切替ボタン列（地図内オーバーレイ） */ .mw-amctl{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:650; display:flex; flex-wrap:nowrap; gap:3px; justify-content:flex-start; max-width:calc(100% - 12px); padding:3px; background:rgba(255,255,255,.92); border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.2); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } /* bottom:8px→26px＝右下の出典表示(Leaflet/国土地理院)と重ならないよう上げる */ .mw-amctl::-webkit-scrollbar{ height:4px; } .mw-amctl::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:4px; } .mw-amctl button{ font-size:.64rem; font-weight:700; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 7px; cursor:pointer; white-space:nowrap; flex:0 0 auto; } .mw-amctl button.is-on{ color:#fff; background:var(--brand,#2563eb); border-color:var(--brand,#2563eb); } .mw-typh svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } /* 台風の予報円＝「◯時間後」ラベル（予報円の中心に配置） */ .mw-fct{ background:none; border:0; } .mw-fct span{ display:inline-block; transform:translate(-50%,-50%); font-size:10.5px; font-weight:800; line-height:1.3; color:#9f1239; background:rgba(255,255,255,.85); border:1px solid #e11d48; border-radius:999px; padding:0 5px; white-space:nowrap; } /* 災害ステータスのタイルはクリックで詳細（地震・津波=地図／他=気象モーダル） */ .haz{ cursor:pointer; } .haz:hover{ box-shadow:0 0 0 2px var(--amber-soft); } .haz:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; } @media (min-width:640px){ .wx-modal{ align-items:center; } .wx-sheet{ border-radius:18px; } } @media (min-width:1024px){ #homeWeather>.card{ max-width:820px; } } /* ====================================================================== メンバー（アカウント）管理 ====================================================================== */ /* アカウント管理＝表タイプ（職員/利用者・家族 共通で sup-table を流用） */ .mb-top{ margin-bottom:10px; } .mb-top .muted{ margin:0; } .mb-name{ font-weight:700; font-size:.92rem; } .mb-email{ font-size:.78rem; color:var(--muted); } .mb-part{ font-size:.78rem; color:var(--muted); margin-top:2px; line-height:1.5; } /* 職員一覧の参集・通勤・距離（常時表示） */ .mb-hint{ font-size:.8rem; color:var(--muted); margin:4px 0 0; } /* フォームの注記（ID変更不可など） */ .mb-rolecell{ white-space:nowrap; } .mb-role{ width:auto; min-width:120px; font-size:.85rem; padding:7px 10px; } .mb-rowops{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; } .mb-mgr{ white-space:nowrap; } /* 役職列（職員一覧） */ .mb-titlecell{ white-space:nowrap; } .mb-title{ background:var(--bg); color:var(--text); border:1px solid var(--line); font-weight:700; } .mb-title-sel{ width:auto; min-width:130px; font-size:.85rem; padding:7px 10px; } /* 並べ替え見出し（職員一覧） */ .mb-th-sort{ cursor:pointer; user-select:none; } .mb-th-sort:hover{ color:var(--text); } .mb-th-sort.is-sort{ color:var(--text); } .mb-th-sort:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; } .mb-sort-ind{ font-size:.7em; margin-left:3px; display:inline-block; width:.8em; } /* 役職マスタ（モーダル） */ .jt-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; } .jt-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); } .jt-name{ font-weight:700; flex:1 1 auto; min-width:0; } .jt-name .jt-edit{ width:100%; font-size:.9rem; padding:6px 9px; } .jt-count{ font-size:.78rem; white-space:nowrap; } .jt-ops{ display:flex; gap:6px; flex:none; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .jt-delq{ font-size:.8rem; } .jt-delok{ color:var(--danger); border-color:#f0c4c4; } .jt-add{ display:flex; gap:8px; margin-top:4px; } .jt-add .inp{ flex:1 1 auto; min-width:0; } .jt-add .btn{ flex:none; } .jt-empty{ margin:10px 0; } /* 行クリック→詳細モーダル（職員一覧） */ .mb-row--click{ cursor:pointer; } .mb-loginmail{ font-size:.8rem; word-break:break-all; } .mb-detail-th{ width:1%; } .mb-detail-cell{ text-align:right; white-space:nowrap; width:1%; } .mb-detail-chev{ color:var(--muted); font-size:1.15rem; font-weight:800; line-height:1; } .mb-row--click:hover .mb-detail-chev{ color:var(--amber-ink); } /* 詳細モーダルの中身 */ .mb-dt-sec{ margin:0 0 16px; } .mb-dt-sec:last-child{ margin-bottom:0; } .mb-dt-h{ font-size:.82rem; font-weight:800; color:var(--muted); margin:0 0 6px; } .mb-dt-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.9rem; } .mb-dt-row:last-child{ border-bottom:0; } .mb-dt-k{ flex:0 0 118px; color:var(--muted); font-weight:700; } .mb-dt-v{ flex:1 1 auto; min-width:0; word-break:break-word; } .mb-dt-v select{ width:auto; max-width:100%; min-width:150px; font-size:.88rem; padding:6px 9px; } .mb-dt-note{ font-size:.78rem; color:var(--muted); margin:9px 0 0; line-height:1.6; } .mb-dt-actions{ border-top:1px solid var(--line); padding-top:14px; } .mb-dt-btns{ display:flex; gap:8px; flex-wrap:wrap; } .mb-del-btn{ color:var(--danger); border-color:#f0c4c4; } .mb-mask{ letter-spacing:2px; color:var(--muted); } .mb-mask-note{ font-size:.78rem; } #mbMsg{ margin-top:8px; } /* 利用者・家族 表 */ .fam-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .fam-h2{ margin:0 0 2px; font-size:1.12rem; } .fam-head .muted{ margin:0; } .fam-name{ font-weight:700; font-size:.92rem; } /* 利用者・家族 複数選択→一括QR印刷 */ .fam-bulk{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--amber-soft); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:10px; } .fam-bulk-n{ font-weight:700; } .fam-chk-cell{ width:1%; white-space:nowrap; text-align:center; } .fam-chk, #famChkAll{ width:18px; height:18px; cursor:pointer; vertical-align:middle; margin:0; } /* 属性マスタ（クラス等）モーダル */ .am-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; } .am-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; } .am-name{ font-weight:700; } .am-ops{ display:flex; gap:6px; flex-wrap:wrap; flex:none; } .am-add{ display:flex; gap:8px; margin-top:8px; } .am-add .inp{ flex:1 1 auto; } .fam-sub{ font-size:.78rem; margin-top:2px; } .fam-rowops{ display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; } .fam-off{ background:#f3e0e0; color:#a33; } .fam-on{ background:#dcf0e6; color:#0a7a59; } /* 配信=有効のバッジ（緑） */ .fam-foot{ font-size:.78rem; line-height:1.6; margin:10px 0 0; } /* 表のみスクロール（.pg-fill ページ・広い画面のみ全幅＋内部スクロール。高さはJSのpageFillが設定） */ @media (min-width:1024px){ .app-main.pg-fill{ max-width:none; } .app-main.pg-fill .pg-scroll{ overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); } .app-main.pg-fill .pg-scroll .sup-table-wrap{ border:0; border-radius:0; overflow-x:visible; } /* 外枠はpg-scroll側。横はpg-scroll内で収める */ .app-main.pg-fill .pg-scroll .sup-table th{ position:sticky; top:0; z-index:1; } /* スクロール時も見出しを固定 */ /* 2カラム（ホーム/ハザード）＝コンテナの高さはJS、各カラムが内部スクロール */ .app-main.pg-fill .pg-fit{ overflow:hidden; align-items:stretch; } .app-main.pg-fill .pg-fit > .home-col, .app-main.pg-fill .pg-fit > .hz-left, .app-main.pg-fill .pg-fit > .hz-right{ overflow-y:auto; min-height:0; } /* BCPアクションカード・発災対応の対応一覧＝右(本文)と左(TOC)だけ内部スクロール（固定高さは pg-fit で確保） */ .app-main.pg-fill .pg-fit > .bcpf-toc, .app-main.pg-fill .pg-fit > .bcpf-sumcontent{ overflow-y:auto; min-height:0; max-height:none; } /* 緊急情報ページ：左「緊急情報を送る」カードは下端まで（本文の高さで調整）／右の一覧は表のみ内部スクロール */ .app-main.pg-fill.board-wide .blt-compose{ display:flex; flex-direction:column; min-height:0; } .app-main.pg-fill.board-wide .blt-compose > .bd-send-card{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; margin-bottom:0; } .app-main.pg-fill.board-wide #bdBody_in{ flex:1 1 auto; min-height:120px; } .app-main.pg-fill.board-wide .blt-history{ display:flex; flex-direction:column; min-height:0; } .app-main.pg-fill.board-wide .blt-history > .sup-table-wrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:12px; } .app-main.pg-fill.board-wide .blt-history .sup-table th{ position:sticky; top:0; z-index:1; background:var(--card); } } @media (min-width:1024px){ #memberRoot>.card{ max-width:820px; } } /* 役割別ナビ（防災担当のみ表示）。非表示は .app-nav 接頭で詳細度を上げ、.app-nav button{display:flex} に負けないように。 */ .app-nav .nav-admin, .app-nav .nav-staff, .app-nav .nav-people{ display:none; } body.is-admin .nav-admin{ display:flex; } body.is-staff .nav-staff{ display:flex; } /* アカウント管理＝管理者は常時（職員タブ）／職員は利用者・家族通知がONのときだけ（利用者・家族タブ用） */ body.can-people .nav-people{ display:flex; } /* アカウント管理＝管理者＋権限付与された防災担当者（staff_manage / family_manage）。config.js sonaePermAllowed → app.js showNav が can-people を付与 */ @media (max-width:767px){ /* 項目が増える職員・防災担当は横スクロールの下部ナビに（はみ出しをつぶさない） */ body.is-staff .app-nav{ grid-template-columns:none; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } body.is-staff .app-nav::-webkit-scrollbar{ display:none; } body.is-staff .app-nav button{ flex:0 0 auto; min-width:62px; font-size:.52rem; padding:8px 2px; gap:2px; } body.is-staff .app-nav button .ic svg{ width:20px; height:20px; } } /* ====================================================================== 全ページ共通の上部ティッカー（常時表示・重要/災害情報を流す） neuron 踏襲：ラベル＋フェード巡回するテキスト窓＋カウンタ。平常=中立地、警報=赤/アンバー。 ====================================================================== */ .topbar{ grid-area:topbar; position:sticky; top:0; z-index:12; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 30px; min-height:56px; font-size:.94rem; font-weight:700; line-height:1.3; cursor:pointer; border-bottom:1px solid var(--line); -webkit-user-select:none; user-select:none; } .topbar[hidden]{ display:none; } /* レベル別の地色 */ .topbar--amb{ background:var(--amber-soft); color:var(--amber-ink); } .topbar--crit{ background:var(--danger); color:#fff; } .topbar--warn{ background:var(--amber); color:var(--on-accent); } .topbar--alert{ box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); } /* フェードするテキスト窓 */ .topbar-win{ flex:1; min-width:0; position:relative; height:34px; overflow:hidden; } .topbar-text{ position:absolute; inset:0; display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; opacity:1; transition:opacity .4s ease; } .topbar-text--fade{ opacity:0; } .topbar-body{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-ic{ flex:none; display:inline-flex; } .topbar-ic svg{ width:17px; height:17px; } /* 右：カウンタ＋開く */ .topbar-counter{ flex:none; font-size:.64rem; font-weight:700; opacity:.7; white-space:nowrap; font-variant-numeric:tabular-nums; } .topbar-go{ flex:none; font-size:.76rem; font-weight:800; opacity:.95; white-space:nowrap; } /* 上部バー右端のログアウト */ .topbar-logout{ flex:none; appearance:none; border:0; background:rgba(0,0,0,.12); color:inherit; font-size:.62rem; font-weight:800; border-radius:6px; padding:4px 10px; margin-left:10px; cursor:pointer; white-space:nowrap; } .topbar-logout:hover{ background:rgba(0,0,0,.2); } .topbar--crit .topbar-logout, .topbar--warn .topbar-logout{ background:rgba(255,255,255,.26); } /* 発災対応/訓練が進行中＝ティッカー全体を赤系に＋対応スライド */ .topbar--resp{ background:var(--danger); color:#fff; box-shadow:inset 0 -2px 0 rgba(0,0,0,.14); } .topbar--resp .topbar-logout{ background:rgba(255,255,255,.26); } .tb-resp-h{ font-weight:800; letter-spacing:.01em; } .tb-resp-d{ margin-left:8px; font-weight:800; background:rgba(255,255,255,.22); padding:1px 9px; border-radius:999px; } .tb-resp-t{ margin-left:8px; font-weight:800; font-variant-numeric:tabular-nums; } .topbar--crit .topbar-logout:hover, .topbar--warn .topbar-logout:hover{ background:rgba(255,255,255,.42); } /* インラインの重大度バッジ（震度/警報/津波＝配色はインライン）。警報・注意報を目立たせるため大きめ。 */ .tb-badge{ display:inline-block; margin-right:7px; padding:3px 11px; border-radius:7px; font-weight:800; font-size:1.02em; vertical-align:middle; box-shadow:0 1px 2px rgba(0,0,0,.14); } .tb-wx{ display:inline-flex; align-items:center; vertical-align:middle; margin:0 6px; } .topbar .wx-ic svg, .tb-wx svg{ height:23px; width:auto; display:block; vertical-align:middle; } .tb-wx-t{ font-weight:800; } .tb-wx-p{ opacity:.9; margin-left:5px; } .tb-wx-sep{ opacity:.45; margin:0 8px; } .tb-wx-area{ opacity:.85; margin-left:12px; } .tb-src{ opacity:.6; font-weight:600; font-size:.82em; } /* ====================================================================== 運営コラム（防災コラム） ====================================================================== */ .cl-head{ margin-bottom:14px; } .cl-head h2, .cl-head h3{ margin:0 0 2px; font-size:1.15rem; } .cl-grid{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:640px){ .cl-grid{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } } .cl-card{ appearance:none; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; padding:0; display:flex; flex-direction:column; color:var(--text); } .cl-card:hover{ border-color:var(--amber); } .cl-hero{ height:142px; background:#eef2f7 center/cover no-repeat; position:relative; } .cl-hero--yt .cl-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); } .cl-hero--none{ height:10px; background:var(--amber-soft); } .cl-cbody{ display:flex; flex-direction:column; gap:5px; padding:12px 13px 14px; } .cl-cat{ align-self:flex-start; font-size:.68rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:999px; padding:2px 10px; } .cl-title{ font-weight:800; font-size:.98rem; line-height:1.35; } .cl-ex{ font-size:.82rem; color:var(--muted); line-height:1.5; } .cl-date{ font-size:.72rem; color:var(--muted); } .cl-back{ appearance:none; border:0; background:none; color:var(--amber-ink); font-weight:700; font-size:.9rem; cursor:pointer; padding:2px 2px 10px; } .cl-article{ max-width:760px; } .cl-dhero{ height:220px; margin:-2px 0 14px; border-radius:12px; background:#eef2f7 center/cover no-repeat; } .cl-h1{ font-size:1.5rem; line-height:1.35; margin:6px 0 4px; } .cl-article .cl-date{ margin:0 0 12px; } .cl-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; margin:0 0 16px; } .cl-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .cl-content{ font-size:.98rem; line-height:1.85; } .cl-content p{ margin:0 0 1em; } .cl-content h2{ font-size:1.15rem; margin:1.4em 0 .5em; } .cl-content h3{ font-size:1.02rem; margin:1.2em 0 .4em; } .cl-content img{ max-width:100%; height:auto; border-radius:10px; } .cl-content ul,.cl-content ol{ margin:0 0 1em; padding-left:1.4em; } .cl-content a{ color:var(--amber-ink); } .cl-src{ margin-top:18px; font-size:.78rem; } /* コラム：2ペイン（左=一覧／右=詳細）。広い画面は左右を独立スクロール。 */ .cl-split{ display:block; } .cl-list{ display:flex; flex-direction:column; gap:8px; } .cl-detail{ margin-top:14px; } .cl-item{ position:relative; appearance:none; text-align:left; display:flex; gap:10px; align-items:stretch; flex:none; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; padding:0; color:var(--text); } .cl-item:hover{ border-color:var(--amber); } .cl-item.is-on{ border-color:var(--amber); background:var(--amber-soft); } /* 選択時の左端アクセント＝サムネイル/プレースホルダに隠れないよう最前面に描画（inset影だと子要素に覆われ一部しか見えなかった） */ .cl-item.is-on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); z-index:2; pointer-events:none; } .cl-item .cl-cat{ background:var(--card); border:1px solid var(--amber); } /* 選択時の背景(amber-soft)と被らないよう、一覧のバッジは白地＋枠線に */ .cl-ithumb{ flex:none; width:84px; align-self:stretch; background:#eef2f7 center/cover no-repeat; } .cl-ithumb--none{ width:6px; background:var(--amber-soft); } .cl-itext{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; min-width:0; } .cl-ititle{ font-weight:800; font-size:.92rem; line-height:1.35; } .cl-idate{ font-size:.7rem; color:var(--muted); } .cl-empty{ display:flex; align-items:center; justify-content:center; min-height:200px; text-align:center; } /* 検索＋カテゴリ絞込ツール＝一覧・詳細の上に全幅配置（右端まで活用） */ .cl-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px; } .cl-cats{ display:flex; flex-wrap:wrap; gap:7px; flex:1 1 auto; } /* 絞込ピルは左 */ .cl-search{ flex:0 0 auto; width:clamp(240px,28%,420px); margin-left:auto; } /* 検索バーは右端に */ .cl-cat-pill{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-weight:700; font-size:.78rem; border-radius:999px; padding:4px 12px; cursor:pointer; } .cl-cat-pill.is-on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); } @media (min-width:1024px){ .app-main.lib-wide{ max-width:none; } /* コラムページは右余白を使って全幅に */ .cl-split{ display:grid; grid-template-columns:clamp(360px,42%,680px) minmax(0,1fr); gap:18px; align-items:stretch; } /* 一覧を約2倍幅に */ .cl-list{ overflow-y:auto; min-height:0; padding-right:4px; } .cl-detail{ overflow-y:auto; margin-top:0; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:22px 26px; } .cl-detail .cl-back{ display:none; } .cl-detail .cl-article{ max-width:900px; } } @media (max-width:1023px){ .cl-detail{ display:none; } .cl-area.is-detail .cl-tools{ display:none; } /* 詳細表示中は絞込ツールを隠す（一覧が隠れているため） */ .cl-area.is-detail .cl-list{ display:none; } .cl-area.is-detail .cl-detail{ display:block; } } /* ====================================================================== 防災交流（施設横断コミュニティ） ====================================================================== */ .cm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .cm-head h2, .cm-head h3{ margin:0 0 2px; font-size:1.15rem; } .cm-head-btns{ display:flex; gap:8px; flex-wrap:wrap; flex:none; } .cm-kind-ro{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-weight:700; } .cm-first{ border-color:var(--amber); background:var(--amber-soft); } .cm-nick-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:5px; font-size:.76rem; } .cm-nick-avail{ font-weight:700; color:var(--muted); } .cm-nick-avail.is-ok{ color:#1a7a53; } .cm-nick-avail.is-ng{ color:var(--danger); } .cm-nick-count{ color:var(--muted); font-variant-numeric:tabular-nums; } .cm-preview{ margin-top:14px; } .cm-pv-ttl{ display:block; font-size:.76rem; font-weight:700; color:var(--muted); margin-bottom:6px; } .cm-pv-card{ border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:11px 13px; } .cm-pv-body{ font-size:.82rem; color:var(--muted); margin-top:6px; line-height:1.5; } .cm-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; } .cm-pill{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:5px 13px; font-size:.82rem; font-weight:700; cursor:pointer; } .cm-pill.is-on{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } /* モード切替（フリートーク / 質問箱） */ .cm-modesw{ display:inline-flex; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:12px; } .cm-mode-btn{ appearance:none; border:0; background:none; color:var(--muted); font:inherit; font-size:.86rem; font-weight:800; border-radius:999px; padding:7px 16px; cursor:pointer; white-space:nowrap; } .cm-mode-btn.is-on{ background:var(--amber); color:var(--on-accent); } /* フリートーク（カテゴリ別チャット） */ .cmch-thread{ display:flex; flex-direction:column; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px; max-height:56vh; overflow-y:auto; margin-bottom:10px; } .cmch-empty{ text-align:center; padding:24px 0; } .cmch-row{ display:flex; } .cmch-row--me{ justify-content:flex-end; } .cmch-msg{ max-width:82%; min-width:0; display:flex; flex-direction:column; } .cmch-row--me .cmch-msg{ align-items:flex-end; } .cmch-who{ font-size:.72rem; font-weight:800; color:var(--muted); margin:0 0 3px 2px; } .cmch-bubble{ font-size:.92rem; line-height:1.6; padding:9px 13px; border-radius:14px; border-top-left-radius:4px; background:var(--card); border:1px solid var(--line); overflow-wrap:anywhere; } .cmch-row--me .cmch-bubble{ background:var(--amber); color:var(--on-accent); border:0; border-top-left-radius:14px; border-top-right-radius:4px; font-weight:600; } .cmch-time{ font-size:.68rem; color:var(--muted); margin:3px 2px 0; } .cmch-del{ appearance:none; border:0; background:rgba(0,0,0,.16); color:inherit; width:18px; height:18px; border-radius:50%; font-size:.9rem; line-height:16px; text-align:center; cursor:pointer; margin-left:8px; vertical-align:middle; opacity:.7; } .cmch-del:hover{ opacity:1; } .cmch-rep{ appearance:none; border:0; background:none; color:var(--muted); font-size:.68rem; cursor:pointer; margin-left:8px; padding:0; text-decoration:underline; opacity:.75; } .cmch-rep:hover{ opacity:1; color:var(--danger); } .cmch-input{ display:flex; gap:8px; align-items:flex-end; } .cmch-input .inp{ flex:1 1 auto; resize:none; min-height:42px; max-height:140px; } .cmch-send{ flex:none; } .cm-grid{ display:flex; flex-direction:column; gap:10px; } .cm-card{ appearance:none; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 14px; cursor:pointer; display:flex; flex-direction:column; gap:5px; color:var(--text); } .cm-card:hover{ border-color:var(--amber); } .cm-crow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cm-cat{ font-size:.68rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:999px; padding:2px 10px; } .cm-author{ font-size:.76rem; font-weight:700; color:var(--muted); } .cm-title{ font-weight:800; font-size:.98rem; line-height:1.35; } .cm-ex{ font-size:.84rem; color:var(--muted); line-height:1.5; } .cm-meta{ font-size:.72rem; color:var(--muted); white-space:nowrap; } .cm-pin{ align-self:flex-start; font-size:.72rem; font-weight:800; color:var(--amber-ink); } .cm-back{ appearance:none; border:0; background:none; color:var(--amber-ink); font-weight:700; font-size:.9rem; cursor:pointer; padding:2px 2px 10px; } .cm-post .cm-h1{ font-size:1.3rem; line-height:1.4; margin:8px 0 10px; } .cm-pbody,.cm-cbody{ font-size:.96rem; line-height:1.75; } .cm-postact,.cm-actions{ margin-top:12px; } .cm-comments{ margin:16px 0 10px; } .cm-comments h3{ font-size:1rem; margin:0 0 8px; } .cm-comment{ border-top:1px solid var(--line); padding:11px 2px 9px; } .cm-comment .cm-crow{ justify-content:space-between; } .cm-del,.cm-rep{ appearance:none; border:0; background:none; color:var(--muted); font-size:.76rem; cursor:pointer; padding:4px 0 0; text-decoration:underline; } .cm-del{ color:var(--danger); } .cm-cform{ margin-top:10px; } .cm-guard{ font-size:.82rem; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:8px 11px; margin:0 0 10px; } .cm-consent .cm-rules{ margin:8px 0 10px; padding-left:1.3em; font-size:.92rem; line-height:1.75; } .cm-consent .cm-note{ font-size:.76rem; margin:6px 0 0; } .cm-consent-btns{ margin-top:14px; } /* ====================================================================== 備蓄品管理（supplies.js） ====================================================================== */ .sup-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .sup-head h2{ margin:0; } .sup-head .muted{ margin:7px 0 0; } .sup-panel{ } .sup-panel-h{ font-size:.92rem; margin:0 0 8px; } .sup-pd{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:10px; } .sup-pd-l{ display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:700; color:var(--muted); } .sup-pd-i{ width:72px; text-align:right; padding:6px 8px; min-height:0; } .sup-pd-ro{ margin:0 0 8px; } .sup-need{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .sup-need-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; } .sup-need-l{ font-weight:800; min-width:3.5em; } .sup-need-v{ font-size:.86rem; color:var(--muted); flex:1 1 auto; } .sup-need-v b{ color:var(--text); font-weight:800; } .sup-need-d{ font-size:.86rem; font-weight:800; } .sup-need-d.is-ok{ color:var(--safe); } .sup-need-d.is-ng{ color:var(--danger); } .sup-need-none{ margin:0 0 10px; } .sup-sum{ display:flex; gap:8px; } .sup-sum-t{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:10px; background:var(--bg); } .sup-sum-t.is-alert{ background:#fff1f1; } .sup-sum-n{ font-size:1.3rem; font-weight:800; line-height:1; } .sup-sum-t.is-alert .sup-sum-n{ color:var(--danger); } .sup-sum-l{ font-size:.72rem; font-weight:700; color:var(--muted); } .sup-pills{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 8px; } .sup-pill{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:.82rem; font-weight:700; border-radius:999px; padding:6px 13px; cursor:pointer; } .sup-pill.is-on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); } .sup-pill--alert{ color:var(--danger); border-color:#f0b9b9; } .sup-pill--alert.is-on{ background:var(--danger); border-color:var(--danger); color:#fff; } .sup-list{ } /* 一覧＝表形式（横幅はsup-wideで解放・狭い端末は表だけ横スクロールしページ本体ははみ出さない） */ .sup-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--card); } .sup-table{ width:100%; border-collapse:collapse; font-size:.9rem; } .sup-table th{ text-align:left; font-size:.73rem; font-weight:800; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--bg); } .sup-table th.sup-t-num, .sup-table th.sup-t-ops{ text-align:right; } .sup-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; } .sup-table tbody tr:last-child td{ border-bottom:0; } .sup-table tbody tr:hover{ background:var(--amber-soft); } .sup-t-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .sup-t-nm{ min-width:140px; } .sup-t-name{ font-weight:800; } .sup-t-note{ display:block; font-size:.74rem; color:var(--muted); margin-top:2px; } .sup-t-loc{ white-space:nowrap; } .sup-t-exp{ white-space:nowrap; } .sup-t-dash{ color:var(--muted); } .sup-t-ops{ text-align:right; white-space:nowrap; } .sup-t-ops button{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.78rem; font-weight:700; border-radius:8px; padding:5px 11px; cursor:pointer; } .sup-t-ops .sup-del{ color:var(--danger); border-color:#f0c4c4; } .sup-cat{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--bg); color:var(--muted); white-space:nowrap; } .sup-cat--water{ background:#e6f1fb; color:#185fa5; } .sup-cat--food{ background:#fbeedd; color:#9a6212; } .sup-cat--med{ background:#e5f3ec; color:#1a7a53; } .sup-cat--power{ background:#efecfb; color:#4b3fae; } .sup-badge{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:999px; } .sup-badge.is-warn{ background:#fdf0d3; color:var(--amber-ink); } .sup-badge.is-ng{ background:#fde2e2; color:var(--danger); } .sup-row2{ display:flex; gap:10px; } .sup-row2 > div{ flex:1; min-width:0; } .sup-form-act{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; } .sup-del-btn{ color:var(--danger); } /* 右上ボタン群（必要量と状況／保管場所マスタ／追加） */ .sup-head-ops{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; justify-content:flex-end; flex:none; } .sup-btn-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; margin-left:6px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:.68rem; font-weight:800; } /* 追加カテゴリの色（飲料水=青／食料=琥珀／電源=紫 は既存） */ .sup-cat--toilet{ background:#e2f0ee; color:#0f766e; } .sup-cat--livingwater{ background:#e3f1f8; color:#0e7490; } .sup-cat--gas{ background:#fbe4d6; color:#b4530f; } /* 必要量モーダル（計算対象ごとに最低限／標準／余裕） */ .sup-nd-people{ margin-bottom:4px; } .sup-need2{ display:flex; flex-direction:column; gap:10px; } .sup-nc{ border:1px solid var(--line); border-radius:12px; padding:11px 12px; } .sup-nc-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; } .sup-nc-stock{ font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums; } .sup-tiers{ display:flex; gap:7px; } .sup-tier{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:1px solid var(--line); border-radius:10px; background:var(--bg); text-align:center; } .sup-tier.is-std{ border-color:var(--amber); background:var(--amber-soft); } .sup-tier-l{ font-size:.72rem; font-weight:800; color:var(--muted); } .sup-tier.is-std .sup-tier-l{ color:var(--amber-ink); } .sup-tier-v{ font-size:.98rem; font-weight:800; font-variant-numeric:tabular-nums; } .sup-tier-v small{ font-size:.64rem; font-weight:700; color:var(--muted); margin-left:1px; } .sup-tier-p{ font-size:.66rem; color:var(--muted); font-variant-numeric:tabular-nums; } .sup-nc-days{ margin-top:8px; font-size:.82rem; font-weight:700; color:var(--muted); } .sup-nc-days.is-ok{ color:var(--safe); } .sup-nc-days.is-warn{ color:var(--amber-ink); } .sup-nc-days.is-ng{ color:var(--danger); } .sup-need2-note{ margin-top:10px; font-size:.76rem; line-height:1.55; } /* 保管場所マスタ */ .sm-add{ display:flex; gap:8px; align-items:center; margin:8px 0 2px; } .sm-add .inp{ flex:1; min-width:0; } .sm-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; } .sm-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; } .sm-name{ font-weight:800; font-size:.92rem; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sm-use{ font-size:.72rem; color:var(--muted); flex:none; } .sm-ops{ display:inline-flex; gap:4px; flex:none; } .sm-ops button{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.74rem; font-weight:700; border-radius:7px; padding:4px 8px; cursor:pointer; } .sm-ops button:disabled{ opacity:.4; cursor:default; } .sm-ops .sm-del{ color:var(--danger); border-color:#f0c4c4; } .sm-empty{ margin-top:8px; } /* 品目フォームの保管場所 */ .sup-loc-hint{ margin:6px 0 0; font-size:.76rem; } /* ====================================================================== 訓練・発災対応（drills.js） ====================================================================== */ /* 共通ページ見出し（全ナビページで統一・sonaePageHead）。訓練(.drill-head)と同形。 */ .page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .page-head > .page-head-l{ min-width:0; } .page-head h2{ margin:0; } .page-head .muted{ margin:7px 0 0; } .page-head-r{ flex:none; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; justify-content:flex-end; } /* 一時トースト（window.sonaeToast） */ .sonae-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px); background:#2b2f3a; color:#fff; padding:10px 18px; border-radius:10px; font-size:.9rem; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.22); opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:12000; pointer-events:none; max-width:90vw; text-align:center; } .sonae-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); } .sonae-toast.is-danger{ background:var(--danger,#dc2626); } .drill-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .drill-head > div{ min-width:0; } .drill-head h2{ margin:0; } .drill-head .muted{ margin:7px 0 0; } .drill-head .drill-add{ flex:none; } .drill-live{ background:var(--danger); border-color:var(--danger); color:#fff; } .drill-sec{ font-size:.92rem; margin:16px 0 8px; } .drill-list{ display:flex; flex-direction:column; gap:8px; } .drill-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 13px; } .drill-item-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .drill-when{ font-size:.82rem; font-weight:800; color:var(--amber-ink); } .drill-type{ flex:none; font-size:.86rem; font-weight:800; padding:4px 12px; border-radius:999px; background:var(--bg); color:var(--muted); } .drill-type--haz{ background:#e6f1fb; color:#185fa5; } /* 種別2＝バッジにせず文字のみ（種別1バッジの右に並べる） */ .drill-kind-txt{ margin-left:9px; font-size:.88rem; font-weight:700; color:var(--text); white-space:nowrap; } /* 行クリックで編集（操作列ボタンは伝播停止） */ .drill-row{ cursor:pointer; } .drill-row:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; } .drill-act-right{ display:inline-flex; align-items:center; gap:10px; } /* 訓練一覧テーブルの操作列＋振り返りリンク配布 */ .drill-type, .drill-mode{ white-space:nowrap; } .drill-t-ops{ text-align:right; white-space:nowrap; } .sup-table th.drill-t-ops{ text-align:right; } .drill-t-ops button{ margin:2px 0 2px 8px; } .drill-sharelink{ display:flex; gap:8px; align-items:center; margin-top:4px; } .drill-sharelink .inp{ flex:1; min-width:0; font-size:.82rem; } .drill-sharelink .btn{ flex:none; } .drill-listhead{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:16px 0 8px; } .drill-listhead-r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .drill-listhead .drill-sec{ margin:0; } .drill-fy{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--muted); } .drill-fy select{ width:auto; min-height:0; padding:6px 10px; font-size:.86rem; } .drill-planned{ color:var(--amber-ink); font-size:.82rem; font-weight:700; margin-left:4px; } .drill-detail{ font-size:.82rem; color:var(--muted); } .drill-scn{ font-size:.8rem; display:inline-block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; } /* 想定・シナリオの先頭抜粋（全文はtitle） */ .drill-phase--scope .drill-phase-h{ color:var(--amber-ink); } .drill-title{ font-weight:800; font-size:.98rem; flex:1 1 auto; min-width:0; } .drill-mode{ flex:none; font-size:.68rem; font-weight:800; padding:2px 8px; border-radius:999px; } .drill-mode--drill{ background:#fdf0d3; color:var(--amber-ink); } .drill-mode--live{ background:#fde2e2; color:var(--danger); } .drill-sub{ font-size:.78rem; color:var(--muted); margin-top:5px; } .drill-ops{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); } .drill-link{ appearance:none; border:0; background:none; color:var(--muted); font-size:.82rem; font-weight:700; cursor:pointer; text-decoration:underline; padding:2px 0; } .drill-del, .drill-del-btn, .drill-reccl + *, .drill-link.drill-del{ } .drill-ops .drill-del{ color:var(--danger); } .drill-back{ appearance:none; border:0; background:none; color:var(--amber-ink); font-size:.9rem; font-weight:800; cursor:pointer; padding:4px 0 10px; } .drill-form-act{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; } .drill-del-btn{ color:var(--danger); } /* 種別の複数選択（チェックボックスのピル） */ .drill-types{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:2px 0 4px; } .drill-type-ck{ display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:700; color:var(--text); cursor:pointer; border:1px solid var(--line); border-radius:999px; padding:7px 13px; -webkit-tap-highlight-color:transparent; } .drill-type-ck input{ margin:0; width:16px; height:16px; accent-color:var(--amber); } .drill-type-ck:hover{ border-color:var(--amber); } .drill-type-ck:has(input:checked){ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } .drill-dur{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--muted); } .drill-dur-i{ width:68px; text-align:right; } .drill-reccl{ margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--bg); } .drill-reccl-h{ font-size:.82rem; font-weight:800; margin-bottom:6px; } .drill-reccl-row{ display:flex; justify-content:space-between; gap:8px; font-size:.84rem; padding:2px 0; color:var(--text); } .drill-reccl-t{ color:var(--muted); font-variant-numeric:tabular-nums; } /* 発災対応フロー（アクションカード） */ .drill-run-top{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; text-align:center; background:var(--amber-soft); } .drill-run--live .drill-run-top{ background:#fdeaea; border-color:#f3b4b4; } .drill-run-mode{ font-size:.9rem; font-weight:800; } .drill-run--live .drill-run-mode{ color:var(--danger); } .drill-run-timer{ font-size:3rem; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:.02em; } .drill-run--live .drill-run-timer{ color:var(--danger); } /* 経過時間ラベル・開始日時・手動/自動バッジ（対応画面の枠内） */ .drill-run-timerwrap{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; } .drill-run-elabel{ font-size:.72rem; font-weight:800; color:var(--muted); letter-spacing:.06em; } .drill-run--live .drill-run-elabel{ color:#c0362c; } .drill-run-start{ font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:2px; } .drill-run-src{ font-family:var(--fdisp); font-weight:800; font-size:.66rem; padding:2px 8px; border-radius:999px; white-space:nowrap; } .drill-run-src--auto{ background:#e3f0fb; color:#1565a6; } .drill-run-src--manual{ background:var(--amber-soft); color:var(--amber-ink); } .drill-run-title{ font-size:1rem; font-weight:800; margin-top:2px; } .drill-run-scn{ font-size:.82rem; color:var(--muted); margin-top:4px; } .drill-run-prog{ font-size:.86rem; font-weight:700; color:var(--muted); margin:8px 0 10px; } .drill-run-end{ background:#3a3a3a; border-color:#3a3a3a; color:#fff; } /* 上部カードのボタンはゴーストだと地色（アンバー/赤）に溶けて見づらい→白地＋はっきりした枠で浮かせる */ .drill-run-top .btn--ghost{ background:var(--card); border-color:var(--line); box-shadow:0 1px 2px rgba(20,16,8,.06); } .drill-run-top .btn--ghost:hover{ border-color:var(--amber); } .drill-run--live .drill-run-top .btn--ghost{ border-color:#eccfcf; } .drill-run-src{ font-size:.8rem; font-weight:700; color:var(--amber-ink); margin-top:4px; } .drill-run--live .drill-run-src{ color:var(--danger); } .drill-run-paused{ font-size:.9rem; font-weight:800; color:var(--amber-ink); margin-top:2px; } .drill-run--live .drill-run-paused{ color:var(--danger); } .drill-run-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } /* 実行中画面のクイック導線（安否確認・緊急情報）＋「次にやること」バナー */ .drill-run-quick{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 0 10px; } /* クイック導線（安否確認・緊急情報）＝赤色系ボタン（アイコンなし） */ .drill-run-quick .drill-q{ background:var(--danger); border:0; color:#fff; box-shadow:none; } .drill-run-quick .drill-q:hover{ filter:brightness(1.06); } .drill-run-next{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; text-align:center; border:1.5px solid var(--amber); background:var(--amber-soft); border-radius:12px; padding:10px 14px; margin-bottom:12px; } .drill-run-next-k{ font-size:.74rem; font-weight:800; color:var(--amber-ink); background:var(--card); border:1px solid var(--amber); border-radius:999px; padding:2px 10px; white-space:nowrap; } .drill-run-next-l{ font-size:1rem; font-weight:800; color:var(--text); } /* 「次にやること」の完了ボタン＝右端・緑（クリックで該当カードにチェック→次へ） */ .drill-run-next .drill-run-next-done{ margin-left:auto; flex:none; background:var(--safe); border:0; color:#fff; min-height:0; padding:7px 16px; } .drill-run-next .drill-run-next-done:hover{ filter:brightness(1.06); } .drill-phases{ display:flex; flex-direction:column; gap:12px; } .drill-phase{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; } .drill-phase.is-now{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-soft); } .drill-run--live .drill-phase.is-now{ border-color:var(--danger); box-shadow:0 0 0 2px #fdeaea; } .drill-phase-h{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem; margin-bottom:8px; } .drill-now{ font-size:.68rem; font-weight:800; color:var(--on-accent); background:var(--amber); padding:2px 8px; border-radius:999px; } .drill-run--live .drill-now{ background:var(--danger); color:#fff; } /* 対応一覧＝BCPのアクションカードページと同じTOC＋1カラム（.bcpf-* を流用） */ .drill-scope{ margin-bottom:14px; } .drill-cardlist{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); } .drill-cardlist .bcpf-sumsec:last-child{ margin-bottom:0; } .drill-cardlist .bcpf-sumsec-h{ color:var(--text); } .drill-cardlist .bcpf-toc-item.is-now .bcpf-toc-t{ font-weight:800; } .drill-toc-now{ font-size:.78rem; font-weight:800; color:var(--on-accent); background:var(--amber); border-radius:999px; padding:2px 9px; margin-left:5px; } .drill-run--live .drill-toc-now{ background:var(--danger); color:#fff; } .drill-cardlist .bcpf-sumsec.is-now .bcpf-sumsec-h{ border-bottom-color:var(--amber); } .drill-run--live .drill-cardlist .bcpf-sumsec.is-now .bcpf-sumsec-h{ border-bottom-color:var(--danger); } /* アクションカード＝BCPカード風（見出し＋本文）。未完了を既定で目立たせ、完了は淡く縮める */ .drill-act{ display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; appearance:none; border:1px solid var(--line); background:var(--card); border-radius:10px; padding:11px 12px; margin-top:8px; cursor:pointer; color:var(--text); transition:opacity .15s, background .15s, border-color .15s; } .drill-act:first-of-type{ margin-top:0; } .drill-act-cb{ flex:none; margin-top:1px; width:22px; height:22px; border:2px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--safe); font-size:.9rem; } .drill-act-main{ flex:1 1 auto; min-width:0; } .drill-act-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .drill-act-time{ flex:none; font-size:.8rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:6px; padding:2px 8px; white-space:nowrap; } .drill-act-l{ font-size:.95rem; font-weight:700; line-height:1.4; } .drill-act-b{ display:block; margin-top:5px; font-size:.86rem; color:var(--muted); line-height:1.55; } .drill-act-t{ flex:none; margin-top:1px; font-size:.78rem; font-weight:800; color:var(--safe); font-variant-numeric:tabular-nums; } /* 次にやること＝最も目立つ（枠＋淡い地色） */ .drill-act.is-next{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-soft); } .drill-act.is-next .drill-act-l{ font-weight:800; } .drill-run--live .drill-act.is-next{ border-color:var(--danger); box-shadow:0 0 0 2px #fdeaea; } /* 完了＝目立たない（淡色・縮小・地色に馴染ませる） */ .drill-act.is-on{ background:var(--bg); border-color:var(--line); opacity:.5; padding-top:8px; padding-bottom:8px; } .drill-act.is-on:hover{ opacity:.75; } .drill-act.is-on .drill-act-l{ font-weight:600; color:var(--muted); } .drill-act.is-on .drill-act-time{ background:transparent; color:var(--muted); padding-left:0; padding-right:0; } .drill-act.is-on .drill-act-cb{ border-color:var(--safe); background:#e6f3ea; } /* 発災対応ページ（実行画面）＝広い画面では右の余白を活かす：タイマーは中央の読みやすい幅、アクションカードは複数列（新聞段組）で並べる */ @media (min-width:1024px){ .app-main.resp-wide{ max-width:none; padding-bottom:16px; } /* 内部スクロール時は下パディングを詰める（下の余白を最小化） */ .resp-wide .drill-run{ max-width:1720px; margin:0 auto; } /* 対応一覧＝左右の余白を活かす：TOCを広め、右1カラムは幅いっぱいに */ .resp-wide .drill-cardlist .bcpf-toc{ width:260px; } .resp-wide .drill-cardlist .bcpf-sumcontent{ padding:16px 28px; } /* 上部エリア＝横長・低背：左に[大きな時間｜情報]／右にボタン群 */ .resp-wide .drill-run-top{ max-width:none; display:flex; align-items:center; justify-content:space-between; gap:28px; text-align:left; padding:12px 26px; } .resp-wide .drill-run-info{ display:flex; flex-direction:row; align-items:center; gap:18px; min-width:0; } .resp-wide .drill-run-timer{ font-size:2.6rem; line-height:1; min-width:5.4em; text-align:left; display:inline-block; } /* 幅を確保＝秒更新で右の文字がちらつかない（BIZ UDPは等幅数字が効かないため／HH:MM:SSの最大幅をカバー） */ .resp-wide .drill-run-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; } .resp-wide .drill-run-meta .drill-run-mode{ font-size:.8rem; } .resp-wide .drill-run-meta .drill-run-title{ font-size:.95rem; margin-top:1px; } .resp-wide .drill-run-meta .drill-run-scn, .resp-wide .drill-run-meta .drill-run-src{ margin-top:1px; } .resp-wide .drill-run-meta .drill-run-prog{ margin:3px 0 0; } .resp-wide .drill-run-actions{ flex:none; display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:250px; } .resp-wide .drill-run-actions .drill-run-quick{ margin:0; justify-content:flex-end; } .resp-wide .drill-run-actions .drill-run-btns{ margin:0; justify-content:flex-end; } .resp-wide .drill-run-next{ margin:0 0 14px; } } /* セッション中のピル（他画面でも表示） */ .drill-pill{ position:fixed; right:12px; bottom:76px; z-index:1510; display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.2); font-weight:800; } .drill-pill--drill{ background:var(--amber); color:var(--on-accent); } .drill-pill--live{ background:var(--danger); color:#fff; } .drill-pill-t{ font-variant-numeric:tabular-nums; font-size:1rem; } .drill-pill-go{ appearance:none; border:0; background:rgba(255,255,255,.3); color:inherit; font-weight:800; font-size:.76rem; border-radius:999px; padding:4px 10px; cursor:pointer; } @media (min-width:768px){ .drill-pill{ bottom:16px; } } /* 実施記録 PDF（印刷→PDF保存） */ #drillPrint{ display:none; } @media print{ /* @page の size/margin は印刷直前に JS 注入（app.js sonaeExport / drills.js / family.js）＝種類ごとに向きを確実化し相互衝突を防ぐ */ body.drill-printing{ display:block !important; } /* ★印刷時は本体をブロックに（グリッドの狭い列に押し込まれるのを防ぐ） */ body.drill-printing > *{ display:none !important; } body.drill-printing > #drillPrint{ display:block !important; width:100%; color:#000; } .dp-doc{ font-family:"BIZ UDPGothic", system-ui, sans-serif; width:100%; padding:0; } .dp-h1{ font-size:17pt; margin:0 0 2mm; text-align:center; } .dp-fac{ text-align:right; font-size:10.5pt; margin-bottom:4mm; } .dp-h2{ font-size:12pt; margin:5mm 0 1.5mm; border-bottom:1.5pt solid #000; padding-bottom:1mm; page-break-after:avoid; } .dp-t{ width:100%; border-collapse:collapse; font-size:10.5pt; table-layout:fixed; } .dp-t th, .dp-t td{ border:0.6pt solid #666; padding:2mm 2.5mm; text-align:left; vertical-align:top; line-height:1.5; overflow-wrap:anywhere; } .dp-t th{ width:36mm; background:#f0f0f0; font-weight:700; } .dp-t tr{ page-break-inside:avoid; } .dp-cl td{ font-size:10pt; } .dp-cl tr.ph td{ background:#f0f0f0; font-weight:700; } .dp-cl td.t{ width:24mm; text-align:right; font-variant-numeric:tabular-nums; } .dp-box{ border:0.6pt solid #666; min-height:20mm; padding:2.5mm; font-size:10.5pt; } .dp-foot{ margin-top:6mm; font-size:9pt; color:#444; text-align:right; } } /* ====================================================================== 一覧のダウンロード（CSV / 印刷→PDF）共通 ====================================================================== */ .dl-menu{ position:relative; display:inline-block; } .dl-menu > summary{ list-style:none; cursor:pointer; } .dl-menu > summary::-webkit-details-marker{ display:none; } .dl-menu-pop{ position:absolute; right:0; top:calc(100% + 6px); z-index:30; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px -8px rgba(20,16,8,.32); padding:6px; min-width:168px; display:flex; flex-direction:column; gap:2px; } .dl-opt{ appearance:none; text-align:left; border:0; background:none; color:var(--text); font:inherit; font-size:.86rem; font-weight:700; border-radius:8px; padding:9px 12px; cursor:pointer; white-space:nowrap; } .dl-opt:hover{ background:var(--amber-soft); } /* 家族ごとのQR付き案内（印刷→PDF保存も可）。A4縦1枚にきっちり収める構成。アンバー基調。 */ #famQrPrint{ display:none; } @media print{ /* ★A4縦の @page は印刷直前に JS で注入（family.js qrPrintMany）。名前付きページ(page:qrsheet)は Edge 等で 向き指定が無視され、一覧/訓練用の既定（A4横）が効いて崩れるため廃止。ここに無名@pageを置くと一覧/訓練まで縦になるので置かない。 */ body.qr-printing{ display:block !important; } /* ★印刷時は本体をブロックに（グリッドの狭い列に押し込まれて縦書き・多ページ化するのを防ぐ）。一覧/訓練と同じ対処。 */ body.qr-printing > *{ display:none !important; } body.qr-printing > #famQrPrint{ display:block !important; } .qp-doc{ font-family:"BIZ UDPGothic", system-ui, sans-serif; color:#1f2430; max-width:178mm; margin:0 auto; -webkit-print-color-adjust:exact; print-color-adjust:exact; page-break-inside:auto; } .qp-doc + .qp-doc{ page-break-before:always; } /* 一括印刷＝1家族1ページ */ .qp-head{ display:flex; align-items:center; gap:3mm; border-bottom:1.4pt solid #E09400; padding-bottom:3mm; margin-bottom:5.5mm; } .qp-logo{ width:12mm; height:12mm; flex:none; } .qp-brandwrap{ text-align:left; } .qp-brand{ font-size:17pt; font-weight:800; line-height:1.05; color:#7a4e00; } .qp-sub{ font-size:9pt; color:#6b7280; } .qp-fac{ margin-left:auto; font-size:12pt; font-weight:700; color:#333; text-align:right; } .qp-h1{ font-size:19pt; text-align:center; margin:0 0 4mm; } .qp-intro{ font-size:10.5pt; line-height:1.75; color:#333; margin:0 auto 5mm; text-align:center; max-width:166mm; } .qp-intro b{ color:#1f2430; } .qp-user{ text-align:center; font-size:12pt; background:#fbf3e0; border:0.6pt solid #f0dca8; border-radius:2.5mm; padding:3mm; margin:0 0 6mm; } .qp-user b{ font-size:15pt; } .qp-main{ border:1.4pt solid #E09400; border-radius:3.5mm; background:#fffdf7; padding:5mm; margin:0 0 6mm; } .qp-main-t{ font-size:14pt; font-weight:800; color:#7a4e00; text-align:center; margin-bottom:4mm; } .qp-main-inner{ display:flex; align-items:center; gap:6mm; } .qp-qr--big svg{ width:48mm; height:48mm; display:block; } .qp-main-right{ flex:1 1 auto; text-align:left; } .qp-main-steps{ margin-bottom:4mm; } .qp-stp{ display:flex; align-items:flex-start; gap:2.5mm; margin-bottom:2.5mm; font-size:11pt; line-height:1.45; } .qp-n{ flex:none; width:6mm; height:6mm; border-radius:50%; background:#E09400; color:#fff; font-weight:800; font-size:9pt; display:flex; align-items:center; justify-content:center; } .qp-urllbl{ font-size:8pt; color:#777; margin:0 0 0.5mm; } .qp-url{ font-size:8pt; word-break:break-all; color:#555; } .qp-recv{ background:#f4f6f8; border-radius:2.5mm; padding:3mm; margin:0 0 5mm; text-align:center; } .qp-recv-t{ display:block; font-weight:800; color:#7a4e00; font-size:10pt; margin-bottom:1.5mm; } .qp-recv-i{ display:inline-block; margin:0 3mm; font-weight:700; font-size:10.5pt; } .qp-safe{ border:0.8pt solid #bfe0d0; background:#f3faf6; border-radius:2.5mm; padding:3.5mm 4mm; margin:0 0 5mm; } .qp-safe-t{ font-weight:800; color:#0a7a59; font-size:10.5pt; margin-bottom:1.5mm; } .qp-safe-b{ font-size:10pt; line-height:1.65; color:#333; } .qp-safe-b b{ color:#1f2430; } .qp-app{ margin:0 0 5mm; } .qp-app-t{ font-size:10pt; font-weight:800; color:#555; text-align:center; margin-bottom:2.5mm; } .qp-app-row{ display:flex; align-items:center; justify-content:center; gap:6mm; } .qp-app-item{ text-align:center; flex:none; } .qp-qr--sm svg{ width:22mm; height:22mm; display:block; margin:0 auto; } .qp-app-lbl{ font-size:8.5pt; font-weight:700; margin-top:1mm; line-height:1.25; } .qp-app-lbl span{ display:block; font-weight:400; color:#777; font-size:7.5pt; } .qp-app-note{ flex:0 1 74mm; font-size:9pt; color:#555; line-height:1.6; text-align:left; } .qp-app-note b{ color:#333; } .qp-memo{ border:1.2pt dashed #E09400; border-radius:3mm; padding:4mm; margin:0 0 5mm; background:#fffaf0; } .qp-memo-t{ font-size:9.5pt; font-weight:800; color:#7a4e00; margin-bottom:1.5mm; } .qp-memo-b{ font-size:11.5pt; white-space:pre-wrap; line-height:1.65; } .qp-note{ font-size:8pt; color:#777; text-align:center; border-top:0.5pt solid #ddd; padding-top:3mm; } } /* ====================================================================== 対応アーカイブ（発災対応ページの過去の対応一覧＋統合ビュー） ====================================================================== */ .ra-sec{ margin-top:18px; } .ra-sec-h{ margin:0 0 4px; font-size:1.05rem; } .ra-sec-desc{ margin:0 0 10px; } .ra-table .ra-row{ cursor:pointer; } .ra-table .ra-row:hover{ background:var(--amber-soft); } .ra-table .ra-row:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; } .ra-row-go{ text-align:right; color:var(--muted); font-weight:700; } .ra-detail-tools{ display:flex; justify-content:flex-end; margin-bottom:10px; } .ra-ov .ra-h{ display:flex; align-items:center; gap:8px; margin:0 0 8px; } .ra-ov-meta{ display:flex; flex-direction:column; gap:4px; font-size:.95rem; } .ra-ov-meta .ra-k{ display:inline-block; min-width:6em; color:var(--muted); } .ra-posts{ display:flex; flex-direction:column; gap:8px; } .ra-post{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; } .ra-post-h{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.9rem; } .ra-post-t{ margin-left:auto; color:var(--muted); font-size:.82rem; } .ra-post-b{ margin-top:4px; white-space:normal; overflow-wrap:anywhere; } #sonaePrint{ display:none; } @media print{ /* @page の size/margin は印刷直前に JS 注入（app.js sonaeExport / drills.js / family.js）＝種類ごとに向きを確実化し相互衝突を防ぐ */ body.sonae-printing{ display:block !important; } /* ★印刷時は本体をブロックに（グリッドの狭い列に押し込まれて縦書きになるのを防ぐ） */ body.sonae-printing > *{ display:none !important; } body.sonae-printing > #sonaePrint{ display:block !important; width:100%; color:#000; } .sp-doc{ font-family:"BIZ UDPGothic", system-ui, sans-serif; width:100%; padding:0; } .sp-h1{ font-size:16pt; margin:0 0 1.5mm; } .sp-meta{ font-size:9pt; color:#333; margin:0 0 4mm; } .sp-t{ width:100%; border-collapse:collapse; font-size:9pt; } /* table-layout:fixed を外し内容に応じて列幅を自動配分（横いっぱいに使う） */ .sp-t th, .sp-t td{ border:0.4pt solid #888; padding:1.4mm 2mm; text-align:left; vertical-align:top; line-height:1.4; } .sp-t th{ background:#eee; font-weight:700; white-space:nowrap; } /* 見出しは折り返さない */ .sp-t td{ overflow-wrap:anywhere; } /* 長い語だけ折り返し（文字ごとの縦書きにはしない） */ .sp-t tr{ page-break-inside:avoid; } .sp-foot{ margin-top:5mm; font-size:8.5pt; color:#555; text-align:right; } /* 対応アーカイブの記録PDF（A4縦・複数セクション）：見出し・小見出し・空欄表記 */ .sp-h2{ font-size:11pt; margin:5mm 0 1.5mm; padding-bottom:0.8mm; border-bottom:0.8pt solid #333; page-break-after:avoid; } .sp-subh{ font-size:9.5pt; font-weight:700; margin:3mm 0 1mm; color:#333; } .sp-empty{ font-size:9pt; color:#555; margin:0 0 2mm; } .sp-doc table + .sp-subh{ margin-top:3mm; } } /* ====================================================================== ハザードマップ（hazard.js） ====================================================================== */ .hz-head{ margin-bottom:10px; } .hz-head h2{ margin:0; } .hz-head .muted{ margin:7px 0 0; } .hz-toggles{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; } .hz-pill{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:.82rem; font-weight:700; border-radius:999px; padding:6px 13px; cursor:pointer; } .hz-pill.is-on{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); } .hz-map{ height:clamp(340px, 56vh, 620px); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#e3ebf2; } .hz-map .mw-msg{ display:flex; height:100%; align-items:center; justify-content:center; color:var(--muted); font-weight:700; } .hz-src{ font-size:.78rem; color:var(--muted); line-height:1.6; margin:8px 0 4px; } .hz-src strong{ color:var(--amber-ink); } .hz-sh-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; } .hz-sh-head-l{ display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; } .hz-sec{ font-size:.92rem; margin:0; } .hz-sh-btns{ display:flex; gap:8px; flex-wrap:wrap; } .hz-shelters{ display:flex; flex-direction:column; gap:8px; margin-top:8px; } .hz-sh{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 13px; } .hz-sh-body{ flex:1 1 auto; min-width:0; } .hz-sh-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .hz-kind{ flex:none; font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--bg); color:var(--muted); } .hz-kind--emergency{ background:#e6f1fb; color:#185fa5; } .hz-kind--designated{ background:#e5f3ec; color:#1a7a53; } .hz-kind--welfare{ background:#efecfb; color:#6b3fae; } .hz-name{ font-weight:800; font-size:.96rem; } .hz-sh-sub{ font-size:.78rem; color:var(--muted); margin-top:4px; } .hz-sh-ops{ display:flex; gap:12px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); } .hz-chk{ display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:2px; } .hz-chk-i{ display:inline-flex; align-items:center; gap:5px; font-size:.86rem; font-weight:700; } .hz-near{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); } .hz-near .hz-name{ font-size:.9rem; } /* 2カラム：地図＋凡例（左）／避難所一覧（右）。狭い端末は縦積み（地図→凡例→避難所一覧）。 */ .hz-layout{ display:block; } .hz-left{ min-width:0; } @media (min-width:1024px){ .app-main.sup-wide .hz-layout{ display:grid; grid-template-columns:minmax(0,1fr) clamp(380px, 26%, 520px); gap:20px; align-items:stretch; } .app-main.sup-wide .hz-right{ margin-top:0; } .app-main.sup-wide .hz-sh-head{ margin-top:0; } /* 避難所の見出しを地図（左カラム）の上端に揃える */ /* 地図を下端まで伸ばして下部余白を活用（凡例・注記は地図の下に残す） */ .app-main.sup-wide.pg-fill .hz-left{ display:flex; flex-direction:column; min-height:0; } .app-main.sup-wide.pg-fill .hz-left .hz-map{ flex:1 1 auto; height:auto; min-height:340px; } /* 避難所パネル：見出し固定・一覧だけ内部スクロール */ .app-main.sup-wide.pg-fill .hz-right{ display:flex; flex-direction:column; min-height:0; } .app-main.sup-wide.pg-fill .hz-right .hz-shelters{ flex:1 1 auto; min-height:0; overflow-y:auto; } } .hz-right{ margin-top:16px; } .hz-hint{ font-size:.78rem; color:var(--amber-ink); font-weight:700; margin:7px 0 0; } .hz-legend{ border:1px solid var(--line); border-radius:12px; background:var(--card); padding:11px 13px; margin:10px 0 6px; } .hz-lg-ttl{ font-size:.82rem; font-weight:800; margin-bottom:8px; } .hz-lg-grp{ margin-bottom:8px; } .hz-lg-grp:last-of-type{ margin-bottom:0; } .hz-lg-lbl{ display:block; font-size:.74rem; font-weight:700; color:var(--muted); margin-bottom:4px; } .hz-lg-row{ display:flex; flex-wrap:wrap; gap:6px 12px; } .hz-lg-i{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; } .hz-sw{ width:17px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.18); flex:none; } .hz-pin-sm{ width:15px; height:15px; flex:none; } .hz-pin-map{ width:30px; height:41px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .hz-pin-leg{ width:20px; height:27px; flex:none; } .hz-lg-pin{ gap:3px; } .hz-lg-note{ font-size:.72rem; color:var(--muted); line-height:1.55; margin:8px 0 0; } .hz-lg-note a{ color:var(--link, #2563eb); } /* 避難所一覧：行クリックで編集モーダル・施設からの直線距離バッジ */ .hz-sh-tip{ font-size:.74rem; color:var(--muted); white-space:nowrap; } .hz-sh--click{ cursor:pointer; transition:border-color .12s, box-shadow .12s; } .hz-sh--click:hover{ border-color:var(--amber); box-shadow:0 1px 6px rgba(0,0,0,.06); } .hz-sh--click:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; } .hz-dist{ flex:none; font-size:.72rem; font-weight:800; color:#185fa5; background:#e6f1fb; border-radius:999px; padding:2px 10px; white-space:nowrap; } .hz-sh-nodist{ color:var(--muted); } /* ====================================================================== AI相談（ai.js） ====================================================================== */ .ai-head{ margin-bottom:10px; } .ai-head h2{ margin:0; } .ai-head .muted{ margin:2px 0 0; } .ai-note{ font-size:.78rem; color:var(--muted); line-height:1.6; background:var(--amber-soft); border:1px solid var(--line); border-radius:12px; padding:9px 12px; margin:0 0 12px; } .ai-note strong{ color:var(--amber-ink); } /* ---- スレッド（吹き出し＋アバター） ---- */ .ai-thread{ display:flex; flex-direction:column; gap:14px; max-height:64vh; overflow-y:auto; padding:6px 2px; scroll-behavior:smooth; } .ai-msg{ display:flex; align-items:flex-end; gap:9px; } .ai-msg--me{ justify-content:flex-end; } .ai-av{ flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--amber); color:var(--on-accent); box-shadow:0 1px 3px rgba(43,35,20,.18); align-self:flex-start; margin-top:2px; } .ai-av svg{ width:17px; height:17px; } .ai-bubble{ max-width:min(86%, 560px); font-size:.93rem; line-height:1.7; padding:11px 14px; border-radius:16px; } .ai-msg--ai .ai-bubble{ background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--text); } .ai-msg--me .ai-bubble{ background:var(--amber); color:var(--on-accent); border-bottom-right-radius:5px; font-weight:600; box-shadow:0 2px 8px -3px rgba(224,148,0,.55); } /* 考え中＝バウンスドット */ .ai-typing{ display:inline-flex; align-items:center; padding:3px 2px; } .ai-dots{ display:inline-flex; gap:5px; } .ai-dots i{ width:7px; height:7px; border-radius:50%; background:var(--muted); display:inline-block; animation:aiDot 1.2s infinite ease-in-out both; } .ai-dots i:nth-child(2){ animation-delay:.18s; } .ai-dots i:nth-child(3){ animation-delay:.36s; } @keyframes aiDot{ 0%,80%,100%{ transform:scale(.55); opacity:.35; } 40%{ transform:scale(1); opacity:1; } } @media (prefers-reduced-motion: reduce){ .ai-dots i{ animation:none; opacity:.6; } } /* ---- 質問候補チップ ---- */ .ai-quick{ display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; } .ai-chip{ appearance:none; position:relative; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-size:.87rem; font-weight:600; border-radius:14px; padding:11px 38px 11px 14px; cursor:pointer; transition:border-color .15s, background .15s, transform .12s; } .ai-chip::after{ content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-62%) rotate(-45deg); transition:border-color .15s; } .ai-chip:hover{ border-color:var(--amber); background:var(--amber-soft); transform:translateX(2px); } .ai-chip:hover::after{ border-color:var(--amber-ink); } /* ---- 入力（ピル型＋丸い送信ボタン） ---- */ .ai-input{ display:flex; gap:8px; align-items:flex-end; margin-top:14px; position:sticky; bottom:0; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:6px 6px 6px 16px; box-shadow:0 1px 2px rgba(43,35,20,.05); transition:border-color .15s, box-shadow .15s; } .ai-input::before{ content:""; position:absolute; inset:-8px -2px -2px; background:var(--bg); border-radius:24px; z-index:-1; } .ai-input:focus-within{ border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); } .ai-input .inp{ flex:1 1 auto; width:auto; resize:none; border:0; background:transparent; border-radius:0; padding:8px 0; min-height:26px; max-height:140px; font:inherit; font-size:16px; line-height:1.5; color:var(--text); } .ai-input .inp:focus{ outline:none; border:0; box-shadow:none; } .ai-send{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--amber); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:filter .15s, transform .12s; } .ai-send svg{ width:19px; height:19px; } .ai-send:hover{ filter:brightness(1.05); } .ai-send:active{ transform:scale(.94); } .ai-send:disabled{ opacity:.45; cursor:default; } /* AI回答の簡易Markdown整形 */ .ai-bubble .ai-h{ font-weight:800; font-size:.97rem; margin:10px 0 3px; } .ai-bubble > .ai-h:first-child{ margin-top:0; } .ai-bubble .ai-list{ margin:2px 0; } .ai-bubble .ai-li{ position:relative; padding-left:1.25em; margin:4px 0; } .ai-bubble .ai-li::before{ content:""; position:absolute; left:3px; top:.66em; width:5px; height:5px; border-radius:50%; background:var(--amber); } .ai-bubble .ai-sp{ height:8px; } .ai-bubble code{ font-family:ui-monospace,monospace; background:var(--amber-soft); padding:1px 5px; border-radius:5px; font-size:.86em; } /* ====================================================================== AI相談ウィジェット（全ページ共通・右下フローティング）— モダン ====================================================================== */ .aiw-fab{ position:fixed; right:16px; bottom:calc(70px + env(safe-area-inset-bottom, 0px)); z-index:1500; display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; background:var(--amber); color:var(--on-accent); font:inherit; font-weight:800; font-size:.9rem; padding:13px 18px; box-shadow:0 6px 20px -4px rgba(224,148,0,.55), 0 2px 6px rgba(20,16,8,.2); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .14s, box-shadow .14s, filter .14s, opacity .14s; } .aiw-fab svg{ width:22px; height:22px; } .aiw-fab:hover{ filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 10px 26px -6px rgba(224,148,0,.6), 0 3px 8px rgba(20,16,8,.22); } .aiw-fab:active{ transform:translateY(0); } .aiw-fab.is-open{ opacity:0; pointer-events:none; } .aiw-panel{ position:fixed; z-index:1520; left:10px; right:10px; top:54px; bottom:10px; background:var(--bg); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 70px -16px rgba(20,16,8,.5), 0 6px 16px rgba(20,16,8,.14); display:flex; flex-direction:column; overflow:hidden; animation:aiwIn .22s ease-out both; } .aiw-panel[hidden]{ display:none; } @keyframes aiwIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .aiw-panel{ animation:none; } } .aiw-head{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--card); } .aiw-id{ display:flex; align-items:center; gap:11px; min-width:0; } .aiw-av{ flex:none; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--amber); color:var(--on-accent); box-shadow:0 2px 8px -2px rgba(224,148,0,.55); } .aiw-av svg{ width:21px; height:21px; } .aiw-idtext{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .aiw-title{ display:block; font-weight:800; font-size:1rem; color:var(--text); } .aiw-sub{ font-size:.72rem; color:var(--muted); font-weight:600; } .aiw-head-actions{ margin-left:auto; display:flex; align-items:center; gap:4px; } .aiw-close{ appearance:none; border:0; background:none; color:var(--muted); cursor:pointer; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; } .aiw-close svg{ width:19px; height:19px; } .aiw-close:hover{ background:var(--amber-soft); color:var(--text); } /* 注意事項＝ヘッダーのピルボタン＋ホバー/クリックで吹き出し表示 */ .aiw-help{ position:relative; display:inline-flex; } .aiw-help-btn{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-size:.73rem; font-weight:700; border-radius:999px; padding:5px 11px 5px 8px; display:inline-flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; } .aiw-help-btn svg{ width:14px; height:14px; } .aiw-help-btn:hover{ border-color:var(--amber); color:var(--amber-ink); background:var(--amber-soft); } .aiw-pop{ position:absolute; top:calc(100% + 8px); right:0; width:278px; max-width:76vw; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px -10px rgba(20,16,8,.45); padding:11px 13px; font-size:.76rem; line-height:1.65; color:var(--muted); z-index:6; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; } .aiw-pop strong{ color:var(--danger); } .aiw-help:hover .aiw-pop, .aiw-pop[data-open="1"]{ opacity:1; visibility:visible; transform:none; } .aiw-note{ font-size:.72rem; color:var(--muted); line-height:1.5; padding:9px 16px; border-bottom:1px solid var(--line); margin:0; background:var(--bg); } .aiw-note strong{ color:var(--danger); } /* 初回利用の同意ゲート */ .aiw-consent{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:22px 20px; overflow-y:auto; background:var(--bg); } .aiw-consent-ic{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--amber-soft); color:var(--amber-ink); display:inline-flex; align-items:center; justify-content:center; margin:0 auto; } .aiw-consent-ic svg{ width:28px; height:28px; } .aiw-consent-ttl{ text-align:center; font-weight:800; font-size:1.06rem; color:var(--text); } .aiw-consent-note{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:.82rem; line-height:1.7; color:var(--text); } .aiw-consent-note strong{ color:var(--danger); } .aiw-consent-actions{ display:flex; flex-direction:column; gap:6px; margin-top:2px; } .aiw-agree{ width:100%; justify-content:center; font-size:.95rem; padding:12px; } .aiw-later{ appearance:none; border:0; background:none; color:var(--muted); font:inherit; font-size:.82rem; cursor:pointer; padding:7px; } .aiw-later:hover{ color:var(--text); } .aiw-thread{ flex:1 1 auto; max-height:none; min-height:0; overflow-y:auto; padding:16px; background:var(--bg); } .aiw-panel .ai-quick{ padding:0 16px; margin:0 0 8px; } .aiw-input{ margin:0 12px 12px; position:static; } .aiw-input::before{ display:none; } /* 訓練/対応中ピル（右下・z44）が出ている間は AI相談FABをその上へ退避（重なり回避） */ body:has(#drillPill) .aiw-fab{ bottom:calc(124px + env(safe-area-inset-bottom, 0px)); } @media (min-width:1024px){ .aiw-fab{ right:22px; bottom:22px; } .aiw-panel{ left:auto; top:auto; right:22px; bottom:22px; width:min(560px, 48vw); height:min(760px, 86vh); } body:has(#drillPill) .aiw-fab{ bottom:70px; } } /* 施設プロフィール（profile.js） */ .pf-nums{ display:flex; flex-wrap:wrap; gap:10px 14px; } .pf-n{ display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:700; color:var(--muted); } .pf-n .inp{ width:74px; text-align:right; padding:6px 8px; min-height:0; } .mp-walk{ color:var(--muted); font-size:.82rem; font-weight:600; } .mp-phone{ display:flex; align-items:center; gap:6px; margin-top:2px; } .mp-phone .inp{ text-align:center; flex:1 1 0; max-width:8.5em; min-width:0; } /* 電話3欄は半分程度の幅に（伸びすぎない） */ .mp-phone-sep{ color:var(--muted); font-weight:800; } .pf-risks{ display:flex; flex-wrap:wrap; gap:10px 16px; } /* 緊急プロフィール（memberprofile.js） */ .mp-ec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:2px; } .mp-email-row{ display:flex; align-items:center; gap:8px; } .mp-email-row .inp{ flex:1 1 auto; min-width:0; } .mp-email-row .btn{ flex:0 0 auto; white-space:nowrap; } .mp-test-msg{ display:block; font-size:.85rem; font-weight:600; margin-top:4px; } .mp-veh, .mp-consent{ display:flex; align-items:flex-start; gap:8px; font-size:.86rem; line-height:1.5; cursor:pointer; } .mp-veh{ margin-top:10px; } .mp-veh input, .mp-consent input{ margin:3px 0 0; flex:none; } .mp-care{ margin-top:12px; border:1px solid var(--amber); background:var(--amber-soft); border-radius:12px; padding:12px 14px; } .mp-care .lbl{ color:var(--amber-ink); margin-top:0; } .mp-care .mp-consent{ color:var(--amber-ink); margin-top:8px; } .pf-risk{ display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:700; color:var(--muted); } .pf-risk .inp{ width:auto; min-width:92px; padding:6px 8px; min-height:0; } /* BCP AIアシスト（bcp.js） */ .bcp-ai .bcp-ai-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .bcp-ai-out{ margin-top:12px; } .bcp-ai-out:empty{ display:none; } .bcp-ai-text{ font-size:.9rem; line-height:1.7; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .bcp-ai-text strong{ color:var(--amber-ink); } .bcp-draft{ display:flex; flex-direction:column; gap:8px; } .bcp-draft-s{ border:1px solid var(--line); border-radius:10px; padding:9px 11px; } .bcp-draft-s .sec__b{ margin-top:5px; font-size:.86rem; color:var(--muted); } /* 訓練の所感・反省（drills.js reflect） */ .drill-refl{ border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-top:8px; } .drill-refl-a{ font-weight:800; font-size:.86rem; margin-bottom:4px; display:flex; align-items:center; gap:6px; } .drill-refl-g{ font-size:.86rem; color:var(--safe); line-height:1.6; } .drill-refl-i{ font-size:.86rem; color:var(--amber-ink); line-height:1.6; } .drill-refl-anon{ font-weight:600; font-size:.7rem; color:var(--muted); background:var(--line); border-radius:999px; padding:1px 8px; } .drill-refl-del{ margin-left:auto; border:0; background:none; color:var(--muted); font-size:.9rem; cursor:pointer; line-height:1; padding:2px 4px; } .drill-refl-del:hover{ color:var(--danger); } .drill-link-ops{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } /* BCP：登録PDFのAI要点・対話（bcp.js） */ .bcpf-list{ display:flex; flex-direction:column; gap:8px; } .bcpf-item{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .bcpf-item .bcpf-row{ border-top:0; padding:11px 13px; } .bcpf-sum{ border-top:1px dashed var(--line); padding:10px 13px; background:var(--bg); } .bcpf-ai-btns{ display:flex; gap:8px; flex-wrap:wrap; padding:2px 13px 12px; } .bcpf-ai-out{ padding:0 13px 12px; } /* BCP（PDF）：登録方法の2択（PDF登録／AIで作成） */ .bcpf-reg{ display:grid; grid-template-columns:1fr; gap:14px; margin:4px 0 12px; } @media (min-width:860px){ .bcpf-reg{ grid-template-columns:1fr 1fr; } } .bcpf-reg-col{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg); } .bcpf-reg-h{ font-size:.82rem; font-weight:800; color:var(--navy); margin-bottom:8px; } .bcpf-reg-note{ margin-top:6px; font-size:.76rem; } /* BCP（PDF）タブ：本編BCP／補足資料の見出しセクション */ .bcpf-sec{ margin-top:16px; } .bcpf-sec--mat{ margin-top:30px; } /* 本編BCPとの間を広げる */ .bcpf-sec-h{ font-size:.92rem; font-weight:800; color:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line); } .bcpf-sec-note{ font-size:.72rem; font-weight:400; color:var(--muted); } .bcpf-sec-add{ flex:none; font-weight:700; } .bcpf-matreg{ margin-top:10px; } .bcpf-matreg .bcpf-reg-h{ margin-bottom:6px; } /* 利用者・家族向け：左＝PDF一覧（狭め・最大3枚分）／右＝自由記述（広め）の2カラム（狭幅は縦積み） */ .bcpf-fam{ display:grid; grid-template-columns:minmax(0, 404px) 1fr; gap:26px; margin-top:8px; align-items:start; } /* 左=PDF3枚(124px)が収まる幅／右=自由記述 */ @media (max-width:760px){ .bcpf-fam{ grid-template-columns:1fr; gap:16px; } } .bcpf-fam-col{ min-width:0; } .bcpf-fam .bcpf-sec-h{ min-height:44px; } /* ＋追加/✎編集ボタン(btn--sm≈37px)の有無で左右の見出し高さ（下線位置）がずれないよう揃える */ .bcpf-fam-note #bcpFamNoteBody{ font-size:.92rem; } /* 補足資料：横並びのコンパクトカード（最大7件） */ .bcpf-matlist{ display:grid; grid-template-columns:repeat(auto-fill, 124px); gap:12px; margin:4px 0 10px; } .bcpf-matcard{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px 8px; background:var(--card); aspect-ratio:1 / 1; } /* アイコン・文字は据え置き、枠サイズのみ調整 */ .bcpf-matcard .bcpf-file{ flex:0 0 auto; flex-direction:column; align-items:center; gap:7px; width:100%; text-align:center; } /* タイトル枠＝常に2行分の高さ(アイコン高さが揃う)を flex中央寄せ＝1行は上下中央・2行はぴったり。内側 .bcpf-nm が2行clamp(長文は…) */ .bcpf-matcard .bcpf-file .bcpf-name{ display:flex; align-items:center; justify-content:center; min-height:2.8em; width:100%; font-size:.76rem; line-height:1.4; white-space:normal; overflow:visible; text-overflow:clip; } .bcpf-matcard .bcpf-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; font-weight:700; word-break:break-word; } .bcpf-matcard .bcpf-ic{ width:42px; height:42px; } /* 枠(124px)に合わせてPDFアイコンを少し大きく */ .bcpf-matcard .bcpf-del{ position:absolute; top:3px; right:3px; padding:2px 6px; } /* 本編BCP（.bcpf-list内）＝アイコン・タイトルを大きめに */ .bcpf-list .bcpf-ic{ width:44px; height:44px; } .bcpf-list .bcpf-name{ font-size:1.08rem; } /* AIでBCPを作成（対話型モーダル・2ペイン：左=対話／右=BCP草案） */ .bcp-aidoc{ flex:1 1 auto; min-height:0; width:100%; display:flex; } .bcp-aidoc-chat{ flex:1 1 50%; min-width:0; min-height:0; display:flex; flex-direction:column; padding:14px 16px; } .bcp-aidoc-doc{ flex:1 1 50%; min-width:0; min-height:0; display:flex; flex-direction:column; padding:14px 16px; border-left:1px solid var(--line); background:var(--bg); } .bcp-aidoc-chat .ai-thread{ flex:1 1 auto; min-height:0; max-height:none; } .bcp-aidoc-chat--full{ flex:1 1 100%; } /* AI改善提案：単一カラムのチャット */ .bcp-aidoc-make{ margin-top:12px; flex:none; display:flex; gap:10px; } .bcp-aidoc-make .btn{ flex:1 1 0; min-width:0; } .bcp-aidoc-usage{ flex:none; margin-top:7px; font-size:.75rem; color:var(--muted); text-align:center; } .bcp-aidoc-usage.is-over{ color:#c0392b; font-weight:700; } /* AI相談の開始画面（未開始時） */ .bcp-aidoc-start{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px 18px; } .bcp-aidoc-start-ic{ color:var(--amber); line-height:0; } .bcp-aidoc-start-lead{ font-size:1.02rem; font-weight:800; color:var(--navy); margin:0; } .bcp-aidoc-start .muted{ font-size:.85rem; max-width:380px; line-height:1.75; margin:0; } .bcp-aidoc-start .btn{ margin-top:10px; padding:11px 26px; } .bcp-aidoc-doc-head{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; font-size:.86rem; color:var(--navy); margin-bottom:8px; } .bcp-aidoc-trunc{ font-weight:400; font-size:.72rem; color:var(--muted); } .bcp-aidoc-doc-body{ flex:1 1 auto; min-height:0; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; } /* 改善提案モーダルの右ペイン＝BCPのPDF表示 */ .bcp-aidoc-doc-head a{ flex:none; text-decoration:none; } .bcp-rvpdf-wrap{ padding:0; overflow:hidden; background:#525659; } .bcp-rvpdf{ width:100%; height:100%; border:0; display:block; } .bcp-aidoc-doc-empty{ color:var(--muted); font-size:.85rem; text-align:center; padding:28px 10px; line-height:1.7; } .bcp-aidoc-doc-note{ color:var(--muted); font-size:.8rem; text-align:center; padding:10px; } /* 右ペイン「これまでに伺った内容」（対話から無料で整理） */ .bcp-sum-count{ font-weight:400; font-size:.75rem; color:var(--muted); } .bcp-sum-list{ margin:0; padding:0; list-style:none; } .bcp-sum-item{ padding:9px 11px; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:8px; background:var(--card); margin-bottom:8px; } .bcp-sum-q{ font-size:.72rem; color:var(--muted); margin-bottom:3px; } .bcp-sum-a{ font-size:.87rem; line-height:1.6; color:var(--text); } .bcp-pdfdoc--preview{ width:auto; padding:16px 18px; font-size:13px; line-height:1.7; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); } @media (max-width:820px){ .bcp-aidoc{ flex-direction:column; overflow:auto; } .bcp-aidoc-doc{ border-left:0; border-top:1px solid var(--line); } .bcp-aidoc-chat, .bcp-aidoc-doc{ flex:1 1 auto; } .bcp-aidoc-chat .ai-thread{ max-height:40vh; } .bcp-aidoc-doc-body{ max-height:40vh; } } /* AI作成BCPのPDF文書（html2canvas用・画面外描画・テーマ非依存の固定色） */ .bcp-pdfdoc{ width:760px; padding:48px 56px; box-sizing:border-box; background:#fff; color:#1a1a1a; font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif; font-size:15px; line-height:1.85; } .bcp-pdfdoc-fac{ font-size:13px; color:#555; text-align:right; margin-bottom:6px; } .bcp-pdfdoc h1{ font-size:24px; font-weight:800; text-align:center; margin:4px 0 20px; padding-bottom:12px; border-bottom:3px solid #1E63D6; color:#12274D; } .bcp-pdfdoc h2{ font-size:18px; font-weight:800; color:#12274D; margin:22px 0 8px; padding:5px 10px; background:#eef3fb; border-left:4px solid #1E63D6; } .bcp-pdfdoc h3{ font-size:15.5px; font-weight:700; margin:14px 0 5px; color:#1a1a1a; } .bcp-pdfdoc p{ margin:6px 0; } .bcp-pdfdoc ul{ margin:6px 0 10px; padding-left:22px; } .bcp-pdfdoc li{ margin:3px 0; } .bcp-pdfdoc table.bcp-tbl{ width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:13.5px; } .bcp-pdfdoc .bcp-tbl th, .bcp-pdfdoc .bcp-tbl td{ border:1px solid #c9d4e5; padding:6px 9px; text-align:left; vertical-align:top; } .bcp-pdfdoc .bcp-tbl th{ background:#eef3fb; font-weight:700; color:#12274D; white-space:nowrap; } .bcp-pdfdoc-foot{ margin-top:28px; padding-top:10px; border-top:1px solid #ccc; font-size:12px; color:#666; } /* PDF一覧：ファイルアイコン＋タイトル（クリックで表示）／削除＝ゴミ箱 */ .bcpf-file{ appearance:none; border:0; background:none; margin:0; padding:0; display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 auto; cursor:pointer; text-align:left; color:var(--text); font:inherit; } .bcpf-file:disabled{ cursor:default; opacity:.55; } .bcpf-file:hover:not(:disabled) .bcpf-name{ text-decoration:underline; } .bcpf-ic{ flex:none; width:34px; height:34px; } .bcpf-file .bcpf-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bcpf-del{ display:inline-flex; align-items:center; justify-content:center; color:var(--danger); padding:6px 8px; } .bcpf-del svg{ width:18px; height:18px; display:block; } .bcpf-ai-out:empty{ display:none; padding:0; } .bcp-chat{ max-height:46vh; } /* 施設プロフィール：避難者想定ヒント（profile.js） */ .pf-hint{ font-size:.78rem; color:var(--muted); margin:6px 0 0; line-height:1.5; } .pf-subhead{ font-size:.74rem; font-weight:800; color:var(--amber-ink); margin:7px 0 3px; } /* 備蓄：対象人数の自動算出＋AIおすすめ品目（supplies.js） */ .sup-pd-wrap{ margin-bottom:10px; } .sup-auto{ margin:0 0 8px; font-size:.9rem; line-height:1.6; } .sup-auto b{ color:var(--amber-ink); font-size:1.02rem; } .sup-auto2{ margin:4px 0 0; font-size:.78rem; } .sup-link{ background:none; border:0; color:var(--amber-ink); font:inherit; font-weight:700; cursor:pointer; padding:0; text-decoration:underline; } .sup-ai{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); } .sup-ai-note{ display:block; font-size:.78rem; margin-top:6px; line-height:1.5; } .sup-ai-out{ margin-top:10px; } .sup-ai-out:empty{ display:none; } .sup-sg-h{ margin:0 0 8px; font-size:.82rem; } .sup-sg{ display:flex; flex-direction:column; gap:8px; } .sup-sg-i{ border:1px solid var(--line); border-radius:10px; padding:9px 11px; } .sup-sg-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .sup-sg-name{ font-weight:800; font-size:.92rem; } .sup-sg .sup-badge{ background:var(--bg); color:var(--muted); } .sup-sg-sub{ font-size:.82rem; color:var(--muted); line-height:1.6; margin-top:4px; } .sup-sg-sub b{ color:var(--text); font-weight:800; } .sup-sg-act{ margin-top:8px; } /* 無効化されたボタンの見た目（appearance:none で既定の淡色化が効かないため明示） */ .btn:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; } /* BCP：章ごとのAI改善（bcp.js） */ .bcp-sec-ops{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .bcp-sec-ai{ margin-top:10px; } .bcp-sec-ai:empty{ display:none; } .bcp-imp{ margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); } .bcp-imp-h{ font-size:.78rem; font-weight:800; color:var(--amber-ink); margin-bottom:6px; } .bcp-imp-s{ font-weight:700; font-size:.92rem; } .bcp-imp-b{ margin-top:6px; font-size:.88rem; line-height:1.7; color:var(--text); } .bcp-imp-act{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; } /* アカウント管理：3ボタン折返し＋管理者タグ（members.js） */ .mb-ops{ flex-wrap:wrap; justify-content:flex-end; } .mb-mgr{ background:var(--amber-soft); color:var(--amber-ink); font-weight:800; } /* アカウント：職員を追加＋配布情報（members.js） */ .mb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .mb-head h2, .mb-head h3.mb-h2{ margin:0; font-size:1.12rem; } .mb-head .mb-desc{ margin:4px 0 0; } .mb-head .btn{ flex:none; white-space:nowrap; } .fam-head .btn{ flex:none; white-space:nowrap; } .mb-faccode{ font-family:var(--mono,monospace); letter-spacing:.04em; color:var(--amber-ink); } .mb-pend{ background:var(--warn); color:#fff; font-weight:700; font-size:.68rem; } .mb-nocontact{ color:var(--muted); font-size:.78rem; } .mb-head-btns{ display:flex; gap:8px; flex-wrap:wrap; flex:none; } .mb-head--right{ justify-content:flex-end; } /* 招待リンク／職員を追加＝表の右上 */ .mb-ivlist{ margin-top:16px; } .mb-ivhead{ font-size:.8rem; font-weight:800; color:var(--muted); margin:0 0 6px; } .mb-ivrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--line); } .mb-ivrow.is-dead{ opacity:.55; } .mb-ivinfo{ min-width:0; font-size:.86rem; } .mb-ivstat{ font-weight:800; } .mb-ivops{ display:flex; gap:6px; flex:none; } .mb-cred{ margin-top:12px; padding:12px 14px; border:1.5px solid var(--amber); border-radius:12px; background:var(--amber-soft); } .mb-cred-h{ font-size:.82rem; font-weight:800; color:var(--amber-ink); margin-bottom:8px; } .mb-cred-row{ display:flex; align-items:baseline; gap:10px; padding:4px 0; font-size:.9rem; } .mb-cred-row span{ flex:none; width:96px; color:var(--amber-ink); font-weight:700; font-size:.8rem; } .mb-cred-row strong{ font-family:var(--mono,monospace); word-break:break-all; } .mb-cred-pw{ font-size:1.12rem; letter-spacing:.06em; } /* 家族連絡先（family.js） */ .fam-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; } .fam-head h2{ margin:0; } .fam-list{ display:flex; flex-direction:column; gap:8px; } .fam-item{ border:1px solid var(--line); border-radius:12px; padding:11px 13px; } .fam-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .fam-name{ font-weight:800; font-size:.95rem; } .fam-off{ background:var(--bg); color:var(--muted); } .fam-sub{ font-size:.82rem; margin-top:3px; } .fam-ops{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; } /* 災害対応モード（disaster.js） */ #disasterBar:empty{ display:none; } /* 本番の対応中＝サイドバーの赤ピルが「災害対応モード中」を告知するため、この端末では上部の赤帯を隠す（上下スクロール回避・2026-10-25） */ body.has-resp-pill #disasterBar{ display:none !important; } .dz-bar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:9px; background:#c0362c; color:#fff; padding:8px 14px; font-size:.9rem; } .dz-dot{ width:10px; height:10px; border-radius:50%; background:#fff; flex:none; animation:dzpulse 1.4s ease-in-out infinite; } @keyframes dzpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } } .dz-txt{ flex:1 1 auto; } .dz-txt b{ font-weight:800; } .dz-clear{ appearance:none; border:1px solid rgba(255,255,255,.7); background:transparent; color:#fff; border-radius:999px; padding:4px 12px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; flex:none; } .dz-clear:hover{ background:rgba(255,255,255,.15); } .dz-home{ border:1px solid #f0c0bb; background:#fff5f4; } .dz-home-h{ display:flex; align-items:center; gap:8px; font-weight:800; color:#c0362c; } .dz-home-h .dz-dot{ background:#c0362c; } .dz-acts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; } .dz-act{ appearance:none; text-align:left; border:1px solid var(--line); background:var(--card); border-radius:12px; padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; font-family:inherit; } .dz-act:hover{ border-color:#c0362c; } .dz-act-t{ font-weight:800; font-size:.95rem; color:var(--text); } .dz-act-s{ font-size:.76rem; color:var(--muted); } @media (min-width:600px){ .dz-acts{ grid-template-columns:repeat(4,1fr); } } .dz-declare .dz-declare-btn{ background:#c0362c; color:#fff; } .dz-auto{ display:flex; align-items:flex-start; gap:7px; font-size:.82rem; color:var(--muted); margin-top:12px; line-height:1.5; cursor:pointer; } .dz-auto input{ margin-top:3px; flex:none; } /* 発災対応の自動開始 設定（disaster.js openAutoSettings） */ .dz-auto-row{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0; } .dz-auto-row .dz-auto-h{ font-weight:800; margin-bottom:6px; } .dz-auto-row .lbl{ margin-top:8px; } .dz-auto-row .lbl:first-of-type{ margin-top:2px; } .dz-auto-act{ display:flex; justify-content:flex-end; margin-top:12px; } /* BCP：災害種別の切り替えタブ（bcp.js renderFilesCard） */ .bcpf-tabs{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .bcpf-tabs::-webkit-scrollbar{ display:none; } .bcpf-tab{ flex:0 0 auto; appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:7px 13px; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .bcpf-tab:hover{ border-color:var(--amber); } .bcpf-tab.is-on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } .bcpf-tab-n{ font-size:.72rem; font-weight:800; background:var(--bg); color:var(--muted); border-radius:999px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; } .bcpf-tab.is-on .bcpf-tab-n{ background:var(--amber-ink); color:#fff; } /* 未登録（本編BCP・資料もアクションカードも無い）災害＝薄いグレーで一目で分かるように（選択中は除く） */ .bcpf-tab.is-empty:not(.is-on){ background:var(--line); border-color:var(--line); color:var(--muted); font-weight:600; } .bcpf-tab.is-empty:not(.is-on):hover{ background:var(--card); border-color:var(--amber); color:var(--text); } /* 災害切替＝正方形タイル（ホーム「災害の状況」のようにアイコン大きめ＋下にラベル。haz アイコン流用） */ .bcpf-tab--ic{ flex-direction:column; align-items:center; justify-content:center; gap:6px; width:92px; min-height:92px; border-radius:12px; padding:10px 6px; text-align:center; } .bcpf-tab-ic{ width:46px; height:46px; flex:none; object-fit:contain; display:block; } .bcpf-tab-ic--ph{ opacity:.45; } /* 未提供グループの暫定アイコン */ .bcpf-tab.is-empty:not(.is-on) .bcpf-tab-ic{ opacity:.5; } /* 未登録はアイコンも淡く */ .bcpf-tab-l{ white-space:normal; font-size:.78rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 発災対応の開始ピッカー（モーダル内の災害アイコンタイルを折り返しグリッドで） */ .resp-pick-grid{ display:flex; flex-wrap:wrap; gap:10px; } .resp-pick-grid .bcpf-tab--ic{ flex:0 0 auto; } .resp-pick-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; } .resp-pick-actions .btn:disabled{ opacity:.5; cursor:default; } /* 本番／訓練の切替（発災対応を開始モーダル上部） */ .resp-mode-seg{ display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap; } .resp-mode-btn{ flex:1 1 140px; appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px; padding:10px 14px; font:inherit; font-weight:700; cursor:pointer; line-height:1.2; } .resp-mode-btn:hover{ border-color:var(--amber); } .resp-mode-btn.is-on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } /* BCP：ページ上部の災害切替＝枠/見出し/カテゴリは廃止。アイコンタイル行のみ（流す）。 */ .bcp-dtop{ margin-bottom:4px; } .badge--dtype{ background:var(--navy); color:var(--card); } /* BCP：グループ内サブタブ（BCP本文・資料 ／ アクションカード） */ .bcp-subtabs{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px; } .bcp-subtab{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:7px 15px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .bcp-subtab:hover{ border-color:var(--amber); } .bcp-subtab.is-on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } /* 選択色＝黄色（他ページ・災害タブと統一） */ .bcp-subtab.is-on .bcpf-tab-n{ background:var(--amber-ink); color:#fff; } /* BCP：全幅2カラム（本文｜資料）レイアウト＝右余白を活用 */ @media (min-width:1024px){ .app-main.bcp-wide{ max-width:none; padding-bottom:16px; } /* アクションカードの内部スクロール時に下余白を詰める */ .app-main.bcp-wide #bcpRoot{ max-width:1680px; } } /* 本文カード：ヘッダー行＋局面サブ見出し */ .bcp-doc-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; } .bcp-doc-head h2{ margin:0; flex:1 1 auto; font-size:1.15rem; } .bcp-doc-badges{ display:inline-flex; gap:6px; } .bcp-off{ margin-top:6px; } .bcp-phase-sec{ margin-top:16px; } .bcp-phase-h{ font-size:.78rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:6px; padding:4px 10px; display:inline-block; margin-bottom:8px; } /* アクションカード：幅活用グリッド */ .bcp-cardgrid{ display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:768px){ .bcp-cardgrid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } } .bcp-cardgrid .bcp-card{ margin:0; } /* BCP：章編集画面は全幅でも読みやすい幅に収める（閲覧の本文列と揃える） */ .bcp-edit-wrap{ max-width:900px; } /* BCP：全面モーダル（PDF表示・AI要点表示） */ .bcp-fsmodal{ position:fixed; inset:0; z-index:1600; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:2vh 2vw; } .bcp-fsmodal-box{ background:var(--card); width:96vw; height:92vh; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 14px 50px rgba(0,0,0,.4); } .bcp-fsmodal-box.is-text{ max-width:860px; } .bcp-fsmodal-box.is-summary{ max-width:1060px; } .bcp-fsmodal-box.is-aidoc{ max-width:1440px; } /* AI作成モーダルは左右2ペインのため広め */ .bcp-fsmodal-box.is-chat{ max-width:860px; } /* AI改善提案は単一カラムの対話 */ .bcp-fsmodal-box.is-pdf{ max-width:none; } /* PDFはほぼ全面（96vw×92vh） */ .bcp-fsmodal-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); flex:none; } .bcp-fsmodal-head h3{ margin:0; flex:1 1 auto; min-width:0; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bcp-fsmodal-ext{ flex:none; text-decoration:none; } .bcp-fsmodal-close{ flex:none; appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:8px; width:34px; height:34px; font-size:1.2rem; line-height:1; cursor:pointer; } .bcp-fsmodal-close:hover{ border-color:var(--navy); } .bcp-fsmodal-body{ flex:1 1 auto; min-height:0; overflow:auto; } .bcp-fsmodal-body.is-pdf{ overflow:hidden; background:#525659; } .bcp-fsmodal-body.is-pdf iframe{ width:100%; height:100%; border:0; display:block; } .bcp-fsmodal-body.is-text{ padding:16px 18px; } .bcp-fsmodal-body.is-summary{ overflow:hidden; display:flex; } .bcp-fsmodal-body.is-aidoc{ overflow:hidden; display:flex; } .bcp-fsmodal-body.is-chat{ overflow:hidden; display:flex; } /* AI要点モーダル：左＝見出し目次／右＝本文 の2ペイン */ /* 要点モーダル：本文(2ペイン)＋左下フッター（要点を作り直す）を縦に積む */ .bcpf-sumcol{ flex:1 1 auto; min-width:0; min-height:0; width:100%; display:flex; flex-direction:column; } .bcpf-sumcol > .bcpf-sumwrap{ flex:1 1 auto; min-height:0; } .bcpf-sumcol > .bcpf-sumcontent--solo{ flex:1 1 auto; min-height:0; } .bcpf-sumfoot{ flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px 12px; border-top:1px solid var(--line); background:var(--card); } .bcpf-sumfoot .muted{ font-size:.78rem; } .bcpf-sumwrap{ display:flex; width:100%; min-height:0; } .bcpf-toc{ width:240px; flex:none; overflow-y:auto; border-right:1px solid var(--line); background:var(--bg); padding:12px 8px; } .bcpf-toc-h{ font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--muted); padding:0 8px 8px; } .bcpf-toc-item{ display:flex; gap:8px; align-items:flex-start; padding:8px 9px; border-radius:8px; cursor:pointer; font-size:.86rem; line-height:1.45; color:var(--text); } .bcpf-toc-item:hover{ background:var(--card); } .bcpf-toc-item.is-active{ background:var(--amber-soft); color:var(--amber-ink); font-weight:700; } .bcpf-toc-n{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--line); color:var(--muted); font-size:.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; } .bcpf-toc-item.is-active .bcpf-toc-n{ background:var(--amber-ink); color:#fff; } .bcpf-sumcontent{ flex:1 1 auto; min-width:0; overflow-y:auto; position:relative; padding:16px 22px; } .bcpf-sumcontent .bcpf-sum-pre{ margin-bottom:16px; color:var(--muted); font-size:.86rem; } /* AI要点：見出しデザイン（番号バッジ＋下線） */ .bcpf-sumsec{ margin-bottom:20px; scroll-margin-top:8px; } .bcpf-sumsec-h{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.02rem; color:var(--navy); margin-bottom:9px; padding-bottom:7px; border-bottom:2px solid var(--amber-soft); } .bcpf-sumsec-n{ flex:none; width:25px; height:25px; border-radius:50%; background:var(--navy); color:var(--card); font-size:.78rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } .bcpf-sumsec-b{ font-size:.92rem; line-height:1.85; color:var(--text); } @media (max-width:640px){ .bcpf-sumwrap{ flex-direction:column; } .bcpf-toc{ width:auto; max-height:26vh; border-right:0; border-bottom:1px solid var(--line); } } /* アクションカード：見出し行の右端に操作ボタン（カードを追加／BCPからAI作成） */ .bcp-cards-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; } .bcp-cards-head h3{ margin:0; } .bcp-cards-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } /* アクションカード一覧：左＝時間帯見出し／右＝一覧（1カード1行）。 ★内側スクロールは作らずページのスクロール1本に（二重スクロール防止）。左レールはティッカー下にstickyで追従。 */ .bcp-cardlist{ margin-top:8px; align-items:flex-start; } .bcp-cardlist .bcpf-toc{ max-height:none; overflow:visible; } .bcp-cardlist .bcpf-sumcontent{ padding:14px 18px; overflow:visible; } .bcp-cardlist .bcpf-sumsec{ scroll-margin-top:64px; } /* 見出しジャンプ時に固定ティッカー下へ（固定はティッカーのみ） */ .bcp-cardlist .bcpf-toc-item{ align-items:center; } /* 時間帯レールは固定しない＝ページと一緒にスクロール（上部の中途半端な固定をなくす） */ .bcpf-toc-c{ margin-left:auto; flex:none; font-size:.68rem; font-weight:800; color:var(--muted); background:var(--line); border-radius:10px; padding:0 7px; line-height:17px; min-width:17px; text-align:center; } .bcpf-toc-item.is-active .bcpf-toc-c{ background:var(--amber-ink); color:#fff; } .bcp-card--row{ margin:0 0 10px; display:flex; align-items:flex-start; gap:12px; } .bcp-card--row:last-child{ margin-bottom:0; } .bcp-card--row .bcp-card-main{ flex:1 1 auto; min-width:0; } .bcp-card--row .bcp-card-ops{ flex:none; margin-top:0; } /* BCP：発災対応アクションカード */ .bcp-cards .bcp-cardph{ margin-top:10px; } .bcp-cardph-h{ font-size:.8rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:6px; padding:4px 9px; display:inline-block; margin-bottom:6px; } .bcp-card{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--card); } .bcp-card-h{ font-weight:700; } .bcp-card-time, .rg-time{ display:inline-block; font-size:.8rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:6px; padding:2px 8px; vertical-align:middle; } /* 発災対応アクションカードの担当タグ＝時刻バッジ(アンバー)と区別する別色（スレートブルー） */ .bcp-card .tag, .rg-h .tag{ background:#e7edf6; color:#3a5680; } @media (prefers-color-scheme: dark){ .bcp-card .tag, .rg-h .tag{ background:rgba(130,160,210,.18); color:#b4c8ea; } } .bcp-card-b{ margin-top:4px; font-size:.9rem; color:var(--text); } .bcp-card-ops{ margin-top:8px; display:flex; gap:8px; } /* 発災対応ページ：災害グループ選択（bcpf-tab と同系のピル） */ .resp-grps{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; } .resp-grp{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:8px 14px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; } .resp-grp:hover{ border-color:var(--amber); } .resp-grp.is-on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } /* 発災対応ページ：読み取り専用の行動指針（時間帯別） */ .rg-phase{ margin-top:12px; } .rg-phase-h{ font-size:.8rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); border-radius:6px; padding:4px 9px; display:inline-block; margin-bottom:6px; } .rg-item{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--card); } .rg-h{ font-weight:700; } .rg-b{ margin-top:4px; font-size:.9rem; color:var(--text); } /* BCPページ上部の本番用「発災対応を開始」 */ .bcp-live-top{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; padding:12px 14px; border:1px solid #f3b4b4; border-radius:12px; background:#fdeaea; } .bcp-live-top .drill-live{ flex:none; } .bcp-live-note{ flex:1; min-width:180px; font-size:.78rem; color:var(--danger); font-weight:700; line-height:1.5; } /* 進行中イベントの復帰／終了ボタン行（発災対応ページ・checkOpenResponse） */ .resp-open-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .resp-open-note .resp-open-resume{ background:var(--danger); border-color:var(--danger); color:#fff; } /* 現場連絡ボード（対応ログ・respboard.js） */ .rb-card{ max-width:760px; } .rb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; } .rb-head > div{ min-width:0; } .rb-head h2{ margin:0; } .rb-head .muted{ margin:7px 0 0; } .rb-head-r{ display:flex; align-items:center; gap:8px; } .rb-evsel-l{ font-size:.78rem; font-weight:800; color:var(--muted); white-space:nowrap; } .rb-head-r .bd-archdd{ margin-left:0; min-width:200px; } /* 現場連絡：左＝送信フォーム/注記、右＝連絡フィード。広い画面は2カラムで右余白を活用 */ .rb-wrap{ display:grid; gap:18px; grid-template-columns:1fr; } .rb-left{ min-width:0; } .rb-right{ min-width:0; } @media (min-width:1024px){ .rb-wrap{ grid-template-columns:minmax(320px,460px) 1fr; align-items:start; } .app-main.board-wide .rb-wrap{ max-width:1600px; } } .rb-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .rb-filter{ appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-size:.82rem; font-weight:700; border-radius:999px; padding:5px 13px; cursor:pointer; } .rb-filter:hover{ border-color:var(--amber); } .rb-filter.is-on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-ink); } .rb-filter[data-k]:not([data-k="all"]).is-on{ background:var(--kc); border-color:var(--kc); color:#fff; } .rb-thread{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; } .rb-post{ border:1px solid var(--line); border-radius:12px; padding:10px 13px; background:var(--card); } .rb-post--mine{ background:var(--amber-soft); border-color:#f0d99a; } .rb-post-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.76rem; color:var(--muted); margin-bottom:5px; } .rb-author{ font-weight:800; color:var(--text); font-size:.85rem; } .rb-kind{ color:#fff; font-weight:800; font-size:.68rem; border-radius:999px; padding:1px 9px; white-space:nowrap; } .rb-loc{ font-weight:700; } .rb-time{ margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap; } .rb-del{ appearance:none; border:0; background:none; color:var(--muted); font-size:1.15rem; line-height:1; cursor:pointer; padding:0 2px; } .rb-del:hover{ color:var(--danger); } .rb-body{ font-size:.92rem; line-height:1.65; color:var(--text); } .rb-empty{ text-align:center; padding:26px 0; } .rb-closed{ text-align:center; color:var(--muted); font-size:.86rem; padding:12px; border:1px dashed var(--line); border-radius:12px; } .rb-compose{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg); } /* 項目名付きで縦1列（種別／拠点・場所／本文）に */ .rb-compose .lbl{ display:block; font-size:.8rem; font-weight:800; color:var(--muted); margin:12px 0 4px; } .rb-compose .lbl:first-child{ margin-top:0; } .rb-kind-sel{ width:auto; min-width:160px; } .rb-loc-in{ width:100%; } .rb-input{ width:100%; resize:vertical; min-height:170px; } .rb-send-row{ display:flex; justify-content:flex-end; margin-top:12px; } .rb-send{ white-space:nowrap; min-width:120px; }