/* 元の1080×720の見開きとアイコンを使い、画面内でページを切り替える。 */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { background: #29221c url('/images/bg_pattern.png') center/cover fixed; color: #15120f; font-family: 'Shippori Mincho B1', serif; }
.spread-viewport { position: fixed; inset: 0 0 20px; display: grid; place-items: center; }
.spread-book { position: absolute; left: 50%; top: 50%; width: 1080px; height: 720px; background: url('/images/bg.png') center/cover no-repeat; transform: translate(-50%, -50%) scale(var(--book-scale, 1)); }
.spread-title { position: absolute; left: 130px; top: 48px; margin: 0; font-size: 15px; font-weight: normal; }
.spread-pages { position: absolute; inset: 90px 150px 120px; }
.spread-page { display: grid; height: 100%; grid-template-columns: 355px 355px; grid-template-rows: 243px 243px; justify-content: space-between; align-content: space-between; }
.spread-page[hidden] { display: none; }
.paper-card { position: relative; height: 243px; border: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.paper-card.art-right .paper-cover { left: auto; right: 37px; }
.paper-cover { position: absolute; left: 15px; top: 29px; width: 134px; height: 188px; }
.paper-cover > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(2px 3px 3px #0002); }
.paper-cover .legacy-cover { position: absolute; overflow: hidden; top: 0; left: 0; }
.paper-cover .legacy-cover span { position: absolute; }
.paper-cover .legacy-cover img { display: block; max-width: none; width: 355px; height: 243px; }
.paper-copy { position: absolute; left: 160px; right: 15px; top: 30px; bottom: 23px; display: flex; flex-direction: column; gap: 10px; letter-spacing: .1rem; }
.paper-card.art-right .paper-copy { left: 20px; right: 179px; }
.paper-copy h2 { font-size: .8rem; line-height: 1rem; margin: 0; }
.paper-date { font: 11px/1.5 sans-serif; margin: 0; }
.paper-intro { font-size: .8rem; line-height: 1rem; margin: 0; }
.paper-stories { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.4; }
.paper-stories li { margin: 0 0 5px; }
.paper-stories span { display: block; font-size: 10px; }
.paper-card.contents-open .paper-cover { display: none; }
.paper-card.contents-open .paper-copy { left: 20px; right: 20px; }
.paper-card.contents-open .paper-stories span { display: inline; margin-left: 5px; }
.paper-actions { margin-top: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.paper-actions button, .paper-actions a { display: inline-block; padding: .8rem 1.2rem; border: 1.5px solid #000; border-radius: 0; background: #fff; color: #212529; font-family: inherit; font-size: .6rem; font-weight: 500; line-height: .5; letter-spacing: .1em; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; }
.paper-actions button:hover, .paper-actions a:hover { color: #fff; background: #000; }
.spread-controls { position: absolute; right: 142px; bottom: 64px; display: flex; gap: 4px; z-index: 20; }
.spread-controls button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #0003; border-radius: 50%; background: #fffffff0; color: #15120f; cursor: pointer; }
.spread-controls button:hover, .spread-controls button:focus-visible { background: #fff; border-color: #15120f; }
.spread-controls svg { width: 12px; height: 18px; display: block; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.spread-controls button:disabled { opacity: .4; cursor: default; }
.original-menu { position: absolute; left: 0; right: 0; top: 605px; height: 111px; display: flex; justify-content: center; align-items: flex-start; gap: 16px; pointer-events: none; }
.original-menu a { display: block; pointer-events: auto; }
.original-menu a:not(.home-link) { margin-top: 53px; }
.original-menu a:nth-last-child(-n+2) { margin-top: 55px; }
.original-menu img { display: block; max-width: none; }
.original-menu .home-link { align-self: flex-start; }
.spread-footer { position: fixed; bottom: 0; width: 100%; height: 20px; display: grid; place-items: center; padding: 3px; color: white; background: #000; text-align: center; font: 9px/1.5 sans-serif; }
button:focus-visible, a:focus-visible { outline: 3px solid #74531f; outline-offset: 3px; }