@charset "UTF-8";
/* 狭い画面でも、開いたシステム手帳の右ページを読む。
   左端に用紙の断面・背・6穴リングを残し、本文とめくる紙を同じ位置へ置く。 */
@media screen and (max-width:820px) {
  html.js body[data-product="systemnote"] {
    --single-binding:24px;
    --paper-w:min(420px,calc(100vw - 68px));
    --paper-h:calc(var(--paper-w)*1.428571429);
    --book-w:calc(var(--paper-w) + var(--single-binding) + var(--frame)*2);
    --book-h:calc(var(--paper-h) + var(--frame)*2);
  }
  html.js body[data-product="systemnote"] .book {
    border-radius:8px 12px 12px 8px;
    background:linear-gradient(90deg,#18291f,#3d4c3e 13px,#17291e 25px,var(--cover) 26px);
  }
  html.js body[data-product="systemnote"] .book::after {
    display:block;
    left:0;
    width:10px;
    background:linear-gradient(90deg,#d0cdbd,#fffdf5 25%,#f1eedf 75%,#bab8a9);
    border:1px solid #85807166;
    border-radius:2px;
    box-shadow:3px 0 5px #10271c50;
    z-index:1;
  }
  html.js body[data-product="systemnote"] .leaves {
    margin-left:var(--single-binding);
    width:var(--paper-w);
  }
  html.js body[data-product="systemnote"] .rings {
    display:flex;
    left:19px;
    width:38px;
    padding:clamp(38px,calc(var(--paper-h)*.105),58px) 0;
  }
  html.js body[data-product="systemnote"] .ring { width:38px; }
  html.js body[data-product="systemnote"] .ring-group { gap:clamp(15px,calc(var(--paper-h)*.038),22px); }
  html.js body[data-product="systemnote"] .page.is-left,
  html.js body[data-product="systemnote"] .page.is-right {
    box-shadow:inset 13px 0 18px -15px #17221a99;
  }
  html.js body[data-product="systemnote"] .turner,
  html.js body[data-product="systemnote"] .turner.backward {
    left:var(--single-binding);
    transform-origin:left center;
  }
  html.js body[data-product="systemnote"] .turner.backward.turning { transform:rotateY(180deg); }
  html.js body[data-product="systemnote"] .edge-button.prev { left:var(--single-binding); }
  html.js body[data-product="systemnote"] .page.is-left::after { left:auto;right:0;transform:none; }
  html.js body[data-product="systemnote"] .book[data-hover="prev"] .page.is-left::after {
    left:0;right:auto;transform:scaleX(-1);
  }
}