/* おしらせ（何が 新しくなったか）と 通知の 設定（js/notify.js・2026-10-01）。さわやか版の 白・水色に 合わせる */
.news-card { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 8px 12px; border: 1px solid #d6e9f1; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 3px 12px rgba(21, 50, 74, .08); text-align: left; font: inherit; cursor: pointer; }
.news-card[hidden] { display: none; }
.news-card .ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f1f5f8; color: #4d6472; }
.news-card .ic svg { width: 20px; height: 20px; }
.news-card .t { min-width: 0; flex: 1; display: grid; gap: 1px; }
.news-card .t b { font: 700 13px/1.3 var(--font-ui); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-card .t small { font: 500 11px/1.35 var(--font-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-card .n { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #e8534f; color: #fff; font: 700 10.5px/18px var(--font-ui); text-align: center; }
.news-card .n[hidden] { display: none; }
.nw-ov { position: fixed; inset: 0; z-index: 430; display: grid; place-items: end center; background: rgba(21, 30, 40, .45); }
.nw { width: min(100%, 520px); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); overflow: hidden; }
@media (min-width: 560px) { .nw-ov { place-items: center; } .nw { border-radius: 24px; } }
.nw .hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.nw .hd b { font: 700 15px var(--font-ui); }
.nw .hd button { border: 0; background: #eef2f5; color: var(--ink-2); border-radius: 99px; width: 32px; height: 32px; font: 900 16px var(--font-ui); cursor: pointer; }
.nw .list { overflow: auto; padding: 0 12px 8px; display: grid; gap: 8px; align-content: start; }
.nw .it { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 14px; background: #f6fafc; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.nw .it.new { background: #e8f6fb; }
.nw .it small { grid-column: 1 / -1; font: 500 10.5px var(--font-ui); color: var(--ink-3); }
.nw .it b { font: 700 13px/1.4 var(--font-ui); }
.nw .it em { font-style: normal; align-self: start; padding: 1px 7px; border-radius: 99px; background: #e8534f; color: #fff; font: 700 10px/16px var(--font-ui); }
.nw .it p { grid-column: 1 / -1; margin: 2px 0 0; font: 500 11.5px/1.6 var(--font-ui); color: var(--ink-2); }
.nw .ft { padding: 10px 16px 14px; border-top: 1px solid #eef2f5; display: grid; gap: 8px; }
.nw .ft .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nw .ft .row span { font: 800 12px/1.4 var(--font-ui); }
.nw .ft .row small { display: block; font: 700 10.5px/1.45 var(--font-ui); color: var(--ink-3); }
.nw-sw { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border: 0; border-radius: 99px; background: #cfdbe3; cursor: pointer; transition: background .2s; }
.nw-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.nw-sw[aria-checked="true"] { background: #2aa6d6; }
.nw-sw[aria-checked="true"]::after { transform: translateX(20px); }
.nw-sw:disabled { opacity: .45; cursor: default; }
.nw-help { font: 700 11px/1.55 var(--font-ui); color: var(--ink-2); padding: 8px 10px; border-radius: 12px; background: #fff6e6; }
.nw-help b { color: #a05a00; }
/* 設定の 中の 通知の 行 */
.set-notify { display: grid; gap: 6px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 14px; background: #f6fafc; }
.set-notify .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-notify .row span { font: 800 13px/1.4 var(--font-ui); }
.set-notify small { font: 700 11px/1.5 var(--font-ui); color: var(--ink-3); }
.set-notify .btn.small { justify-self: start; }