@charset "UTF-8";
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #222; font: 13px/1.7 "MS PGothic", "ＭＳ Ｐゴシック", serif; }
.page { width: min(460px, calc(100% - 32px)); margin: 56px auto 40px; }
a { color: #0000a0; text-decoration: underline; }
a:visited { color: #551a8b; }
a:focus-visible { outline: 1px dotted #222; outline-offset: 4px; }
h1 { margin: 0 0 24px; font-size: 13px; font-weight: normal; }
#purchase-total { margin: 0 0 8px; }
.purchase-note { color: #777; font-size: 11px; margin: 0; }
#purchase-list { list-style: none; margin: 30px 0; padding: 0; }
#purchase-list li { margin: 0 0 24px; overflow-wrap: anywhere; }
#purchase-list li[hidden] { display: none; }
#purchase-tools { margin: 24px 0 0; }
#purchase-tools[hidden] { display: none; }
#purchase-search { display: block; width: 100%; padding: 3px 5px; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #222; font: 13px "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; }
#purchase-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
#purchase-genres button { padding: 1px 6px; border: 1px solid #aaa; border-radius: 0; background: #eee; color: #222; font: 11px/1.6 "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; cursor: pointer; }
#purchase-genres button[aria-pressed="true"] { background: #0000a0; border-color: #0000a0; color: #fff; }
#purchase-genres button:focus-visible, #purchase-search:focus-visible { outline: 1px dotted #222; outline-offset: 2px; }