/* JapanSOHO's one-handed viewer, within the smaller dialog chosen for this site. */
.real-board-preview #detail-dialog>.dialog-close{top:auto;right:auto;left:50%;bottom:8px;transform:translateX(-50%);width:44px;height:44px;background:transparent;color:#222;border:0;font-size:30px;box-shadow:none}
.real-board-preview #detail-dialog .figure-contact-bar{padding-bottom:58px;padding-top:9px}
.figure-viewport{overflow:hidden;background:#fff}
.figure-zoom-image{position:absolute;left:50%;top:50%;margin:0;transform-origin:center;will-change:transform;cursor:default;box-shadow:none}
.figure-zoom-image.figure-animating{transition:transform 220ms ease-out}
.figure-gesture-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:1;margin:0;padding:7px 12px;background:#25291fb3;color:white;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:none;border-radius:18px}
@media(max-width:800px){.figure-viewport{touch-action:none}}
@media(min-width:801px){.figure-gesture-hint{display:none}}

/* Five approximate geographic zones keep a larger inventory in a few paper piles. */
.map-pinboard{height:760px}.hero-loop{height:730px;width:610px;max-width:90%}
.hero-flyers{left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);width:min(900px,100%);height:730px}
.hero-stack{position:absolute;pointer-events:auto;width:30%;max-width:270px;perspective:800px}
.hero-stack[data-zone="north-west"]{left:5%;top:52px;transform:rotate(-4deg)}
.hero-stack[data-zone="north-east"]{right:4%;top:160px;transform:rotate(3deg)}
.hero-stack[data-zone="west"]{left:4%;top:365px;transform:rotate(2deg)}
.hero-stack[data-zone="east"]{right:3%;top:475px;transform:rotate(-3deg)}
.hero-stack[data-zone="south"]{left:35%;top:720px;transform:rotate(-2deg)}
.hero-stack[data-zone="unplaced"]{right:2%;top:815px;transform:rotate(2deg)}
.map-pinboard.has-south{height:1110px}
.stack-heading{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;margin:0 0 9px;padding:4px 6px;background:#e8df45;border:1px solid #222;line-height:1.25}
.stack-count{font-size:14px;font-weight:bold;white-space:nowrap;background:#222;color:#f3edcd;padding:2px 5px}
.stack-papers{position:relative;isolation:isolate}
.has-many .stack-papers:before,.has-many .stack-papers:after{content:"";position:absolute;inset:0;background:#f1eddb;border:1px solid #555;box-shadow:2px 3px #2223;z-index:-1}
.has-many .stack-papers:before{transform:translate(10px,12px) rotate(3deg)}
.has-many .stack-papers:after{transform:translate(5px,6px) rotate(-2deg)}
.hero-stack-face{position:relative;display:block;width:100%;padding:8px;background:#f5f1df;border:1px solid #222;color:#222;text-align:left;font-family:inherit;box-shadow:2px 3px #2224;cursor:pointer;transform:translateY(var(--swipe-y,0px));user-select:none;-webkit-user-select:none}
.hero-stack.has-many .hero-stack-face{touch-action:pan-x;cursor:grab}
.hero-stack-face:focus-visible,.stack-navigation button:focus-visible{outline:3px solid #a92312;outline-offset:3px}
.hero-stack-face img{display:block;width:100%;height:auto;aspect-ratio:1.414;object-fit:contain;background:#fff;border:1px solid #888;filter:none;-webkit-user-drag:none}
.hero-stack .flyer-neighborhood{font-size:11px;margin-bottom:4px;padding-bottom:3px}
.hero-stack .flyer-price{font-size:30px;margin-top:4px}
.hero-stack .flyer-price small{font-size:10px}
.stack-room{display:block;font-size:10px;font-weight:bold;line-height:1.3;margin-top:3px}
.stack-navigation{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:14px;position:relative;z-index:1}
.stack-navigation button{min-height:40px;min-width:40px;border:1px solid #333;background:#f1eddb;color:#222;padding:5px 7px;font-family:inherit;font-size:11px;font-weight:bold;cursor:pointer}
.stack-position{font-size:11px;font-weight:bold;white-space:nowrap}
.stack-hint{font-size:9px;font-weight:bold;margin:4px 0 0;line-height:1.5;text-align:center}
.is-turning .hero-stack-face{animation:paper-lift 200ms ease-in both;pointer-events:none}
.is-entering .hero-stack-face{animation:paper-settle 180ms ease-out both;pointer-events:none}
@keyframes paper-lift{to{transform:translateY(-90px) rotateX(55deg) rotate(-5deg);opacity:0}}
@keyframes paper-settle{from{transform:translateY(22px) rotateX(-12deg);opacity:.45}to{transform:translateY(0) rotateX(0);opacity:1}}
.map-geography-note{font-size:10px}
.map-price-note{bottom:30px;top:auto}
@media(max-width:900px){.hero-stack{width:32%}.hero-stack[data-zone="north-west"]{left:2%}.hero-stack[data-zone="north-east"]{right:2%}.hero-stack[data-zone="west"]{left:2%}.hero-stack .flyer-price{font-size:26px}.stack-heading{font-size:11px}}
@media(max-width:580px){
  .map-pinboard{height:760px}.hero-loop{width:390px;max-width:100%;height:540px;top:0}
  .hero-flyers{width:100%;height:730px}
  .hero-stack{width:44%;max-width:none}
  .hero-stack[data-zone="north-west"]{left:1%;top:55px}
  .hero-stack[data-zone="north-east"]{right:2%;top:225px}
  .hero-stack[data-zone="west"]{left:1%;top:425px}
  .hero-stack[data-zone="east"]{right:2%;top:590px}
  .hero-stack[data-zone="south"]{left:3%;top:785px}
  .hero-stack[data-zone="unplaced"]{right:2%;top:965px}
  .map-pinboard.has-south{height:1250px}
  .hero-stack-face{padding:6px}.stack-heading{font-size:10px;gap:2px;padding:4px;margin-bottom:8px}.stack-count{font-size:12px;padding:2px 3px}
  .hero-stack .flyer-neighborhood{font-size:9px}.hero-stack .flyer-price{font-size:24px}.hero-stack .flyer-price small{font-size:8px}.stack-room{font-size:9px}.stack-hint{font-size:8px}.stack-position{font-size:10px}.stack-navigation button{font-size:9px;min-height:44px;min-width:36px;padding:5px}.stack-navigation{margin-top:13px;gap:2px}
  .map-price-note{left:auto;right:4%;bottom:50px;top:auto;transform:rotate(4deg);width:175px}.map-price-note strong{font-size:16px}.map-price-note b{font-size:37px}.map-geography-note{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.figure-zoom-image.figure-animating{transition:none}.is-turning .hero-stack-face,.is-entering .hero-stack-face{animation:none}}

/* Paper stays attached at its top edge; pointer progress controls its angle. */
.hero-stack .stack-papers{perspective:850px;transform-style:preserve-3d}
.hero-stack-face{transform:translateY(var(--paper-lift,0px)) rotateX(var(--paper-angle,0deg));transform-origin:50% 0;backface-visibility:hidden;will-change:transform;transition:none}
.hero-under-sheet{position:absolute;inset:0;z-index:-1;background:#f5f1df;padding:8px;border:1px solid #333;transform:translate(5px,6px) rotate(-1deg);pointer-events:none}
.hero-under-sheet img{display:block;width:100%;height:auto;aspect-ratio:1.414;object-fit:contain;background:#fff;border:1px solid #888}
.hero-stack .stack-navigation{justify-content:center;margin-top:16px}.hero-stack .stack-hint{margin-top:3px}
.paper-settling{transition:transform 210ms ease-out!important}
.hero-stack.has-many .hero-stack-face{touch-action:pan-x;cursor:grab}.hero-stack.has-many .hero-stack-face:active{cursor:grabbing}
.figure-deck-label{display:flex;flex:0 0 auto;justify-content:center;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#eee9d4;border-bottom:1px solid #777;font-size:12px;line-height:1.35}.figure-deck-label>span{white-space:nowrap}.figure-deck-label strong{background:#222;color:#f5efda;padding:2px 6px;font-size:15px}
.figure-deck-viewport{perspective:1200px;overflow:hidden;background:#d5d1c3;cursor:default;touch-action:none}
.figure-deck-viewport.has-paper-stack[data-zoom="1"]{cursor:grab}.figure-deck-viewport.has-paper-stack[data-zoom="1"]:active{cursor:grabbing}
.figure-paper-pile{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.figure-turn-sheet,.figure-back-sheet{position:absolute;left:50%;top:50%;width:var(--paper-width,90%);height:var(--paper-height,80%);transform:translate(-50%,-50%);background:#fff;box-shadow:2px 4px 9px #0004}
.figure-turn-sheet{transform:translate(-50%,-50%) translateY(var(--paper-lift,0px)) rotateX(var(--paper-angle,0deg));transform-origin:50% 0;transform-style:preserve-3d;will-change:transform;background:transparent;box-shadow:none}
.figure-sheet-front,.figure-sheet-reverse{position:absolute;inset:0;backface-visibility:hidden;background:#fff;box-shadow:2px 4px 9px #0004}
.figure-sheet-front{transform:translateZ(.1px)}
.figure-sheet-reverse{transform:rotateX(180deg);background:linear-gradient(110deg,#e5e0d4,#faf9ef 55%,#ded8ca)}
.figure-back-sheet img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.figure-back-sheet.back-one{transform:translate(calc(-50% + 7px),calc(-50% + 9px)) rotate(-1deg)}
.figure-back-sheet.back-two{transform:translate(calc(-50% + 14px),calc(-50% + 18px)) rotate(1.5deg)}
.figure-turn-sheet .figure-zoom-image{pointer-events:none;box-shadow:none}
.figure-paper-hint{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);margin:0;max-width:calc(100% - 16px);padding:6px 10px;z-index:2;background:#25291fb3;color:#fff;font-size:11px;line-height:1.5;text-align:center;pointer-events:none;white-space:nowrap}
.figure-paper-hint .zoom-hint{display:none}.figure-deck-viewport:not([data-zoom="1"]) .fit-hint{display:none}.figure-deck-viewport:not([data-zoom="1"]) .zoom-hint{display:inline}
@media(min-width:801px){.figure-paper-hint .fit-hint{font-size:0}.figure-deck-viewport.has-paper-stack .figure-paper-hint .fit-hint:after{content:"紙を上へドラッグしてめくる ・ 下へ戻すと元に戻る";font-size:11px}.figure-deck-viewport:not(.has-paper-stack) .figure-paper-hint{display:none}}
@media(max-width:580px){.hero-under-sheet{padding:6px}.figure-deck-label{gap:4px 12px;padding:7px 8px;font-size:10px}.figure-deck-label strong{font-size:13px}.figure-paper-hint{font-size:10px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.paper-settling{transition:none!important}}