/* VoiceKit サポートサイト共通スタイル（外部依存なし・GitHub Pages 用） */ :root { --purple: #a233ed; --deep: #5f15be; --bg: #ffffff; --bg-soft: #f5f2fa; --text: #1c1428; --muted: #5d5470; --border: #e2dced; } @media (prefers-color-scheme: dark) { :root { --purple: #b968f5; --deep: #7a2ee0; --bg: #1c0843; --bg-soft: #2e0b55; --text: #f3eefb; --muted: #c3b6d8; --border: #47106d; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif; line-height: 1.75; -webkit-text-size-adjust: 100%; } .wrap { max-width: 760px; margin: 0 auto; padding: 24px 20px 72px; } header.site { background: linear-gradient(160deg, var(--deep), var(--purple)); color: #fff; padding: 40px 20px 32px; text-align: center; } header.site h1 { margin: 0 0 6px; font-size: 2rem; letter-spacing: .02em; } header.site p { margin: 0; opacity: .92; } header.site a { color: #fff; } nav.top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } nav.top a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 5px 14px; font-size: .9rem; } nav.top a:hover { background: rgba(255,255,255,.16); } .langbar { display: flex; gap: 8px; justify-content: flex-end; margin: 16px 0 4px; } .langbar button { font: inherit; font-size: .85rem; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; } .langbar button[aria-pressed="true"] { background: var(--purple); color: #fff; border-color: var(--purple); } h2 { margin-top: 2.2em; font-size: 1.35rem; border-bottom: 2px solid var(--border); padding-bottom: .3em; } h3 { margin-top: 1.8em; font-size: 1.08rem; } a { color: var(--purple); } ul { padding-left: 1.3em; } li { margin: .35em 0; } code { background: var(--bg-soft); padding: .1em .4em; border-radius: 4px; font-size: .92em; } .card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin: 20px 0; } .note { color: var(--muted); font-size: .92rem; } .updated { color: var(--muted); font-size: .88rem; } footer.site { border-top: 1px solid var(--border); margin-top: 48px; padding: 24px 20px 40px; text-align: center; color: var(--muted); font-size: .88rem; } /* 言語セクションの表示制御。★`[lang]` だけだと にも当たってページ全体が消えるので 必ず section に限定する。JS 無効時に何も見えなくならないよう、HTML 側で ja に .on を付けてある。 */ section[lang]:not(.on) { display: none; }