/* おうちのかた向けのページ（help.html・about.html）。子どもの画面とは別の、落ち着いた見た目 */
:root { --ink: #3a2e25; --weak: #7a6a5a; --line: #eadfce; --accent: #2b8f96; --bg: #fbf8f3; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.75 "Hiragino Sans", "BIZ UDPGothic", "Meiryo", system-ui, sans-serif; }
.pg { max-width: 680px; margin: 0 auto; padding: 16px 16px 40px; }
h1 { font-size: 22px; margin: 6px 0 10px; }
h2 { font-size: 17px; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
h3 { font-size: 15px; margin: 14px 0 4px; }
p { margin: 6px 0; }
a { color: var(--accent); word-break: break-all; }
.back a { text-decoration: none; font-weight: 700; }
.lead { color: var(--weak); font-size: 14px; }
details.qa { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 0 12px; }
details.qa summary { cursor: pointer; padding: 10px 0; font-weight: 700; list-style: none; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::before { content: "Q. "; color: var(--accent); }
details.qa[open] summary { border-bottom: 1px dashed var(--line); }
details.qa p { padding: 8px 0 10px; }
.more { margin-top: 24px; }
.more small, .dev { display: block; color: var(--weak); font-size: 12px; }
.dev { margin-top: 30px; text-align: center; }
section p { overflow-wrap: anywhere; }