:root { --bg:#fff; --ink:#2c2417; --sub:#6b5e50; --line:#e4ddd4; --green:#248a69; --dark:#1c6e52; --mint:#e4f3eb; --mint2:#bfe3cf; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; font-weight:500; }

/* --- 本棚（2026-09-25：オンラインショップのデザインに合わせた） ---
   主役＝白・2pxの線・ミントのずらし影のカード／補助＝ミント。 */
.site { border-bottom:2px solid var(--ink); background:#fff; }
.site-inner { display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:1080px; margin:0 auto; padding:14px 16px; }
.site-logo { color:var(--ink); font-size:18px; font-weight:900; letter-spacing:.04em; text-decoration:none; }
.site-back { padding:6px 14px; border:2px solid var(--ink); border-radius:999px; color:var(--ink);
  font-size:12px; font-weight:700; text-decoration:none; box-shadow:0 3px 0 var(--mint2); white-space:nowrap; }
.shelf-page { max-width:1080px; margin:0 auto; padding:32px 16px 56px; }
.pill { display:inline-block; margin:0 0 10px; padding:3px 14px; border:1px solid #c4bab0;
  border-radius:999px; color:var(--sub); font-size:12px; }
.shelf-page h1 { margin:0 0 10px; font-size:26px; font-weight:900; line-height:1.45; }
.shelf-lead { max-width:640px; margin:0 0 28px; color:var(--sub); font-size:14px; line-height:1.9; }
.shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 16px; }
.shelf-item { position:relative; display:flex; flex-direction:column; padding:12px;
  border:2px solid var(--ink); border-radius:24px; background:#fff; box-shadow:0 6px 0 var(--mint2);
  color:inherit; text-decoration:none; transition:transform .15s ease; }
.shelf-item:hover { transform:translateY(-2px); }
.shelf-cover { display:block; overflow:hidden; border-radius:12px; background:var(--mint); }
.shelf-item img { display:block; width:100%; aspect-ratio:182/257; object-fit:cover; }
.shelf-item.is-locked img { filter:saturate(.5) brightness(.96); }
.shelf-meta { display:block; margin-top:10px; font-size:13px; line-height:1.5; }
.shelf-no { display:inline-block; margin-bottom:4px; padding:1px 10px; border-radius:999px;
  background:var(--mint); color:var(--dark); font-size:12px; font-weight:700; }
.shelf-meta strong { display:block; font-size:15px; font-weight:900; }
.shelf-read { display:block; margin-top:6px; color:var(--green); font-size:12px; font-weight:700; }
.lock { display:inline-block; margin-top:6px; padding:1px 10px; border-radius:999px;
  background:#efece8; color:var(--sub); font-size:11px; font-weight:700; }
.sticker { position:absolute; right:-10px; top:-14px; z-index:2; display:grid; width:58px; height:58px;
  place-items:center; background:var(--green); color:#fff; font-size:11px; font-weight:900;
  clip-path:polygon(50% 0,61% 8%,75% 4%,80% 18%,94% 22%,92% 37%,100% 50%,92% 63%,94% 78%,80% 82%,75% 96%,61% 92%,50% 100%,39% 92%,25% 96%,20% 82%,6% 78%,8% 63%,0 50%,8% 37%,6% 22%,20% 18%,25% 4%,39% 8%);
  transform:rotate(8deg); }
.shelf-cta { display:grid; grid-template-columns:1fr auto; gap:12px 20px; align-items:center; margin-top:44px;
  padding:20px 22px; border-radius:24px; background:var(--mint); }
.shelf-cta b { display:block; font-size:16px; font-weight:900; }
.shelf-cta p { margin:4px 0 0; color:var(--sub); font-size:13px; }
.site-foot { padding:20px 16px 32px; text-align:center; }
.site-foot a { color:var(--sub); font-size:12px; }
.empty { color:var(--sub); font-size:13px; padding:20px 0; }

:root[data-size="s"] { --reader-size: 14px; }
:root { --reader-size: 16px; }
:root[data-size="l"] { --reader-size: 19px; }

/* --- 号を読む画面 ---
   高さを calc で決め打ちせず、ヘッダ／紙面／下の操作帯を縦に積む。
   表紙のように帯が出ないページでも、余白が無駄に空かない。 */
.issue { display:flex; flex-direction:column; height:100dvh; }
.reader-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 14px; font-size:12px; border-bottom:2px solid var(--ink);
  background:#fff; font-weight:700; }
.reader-head .back { color:inherit; text-decoration:none; white-space:nowrap; }
.issue-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.counter { white-space:nowrap; color:var(--sub); }

.deck { flex:1 1 auto; min-height:0; position:relative;
  display:flex; direction:rtl; overflow-x:auto; scroll-snap-type:x mandatory; }
/* 狭い画面では見開きにせず、1ページずつ送る */
.spread { display:contents; }
.slide { flex:0 0 100%; scroll-snap-align:center; direction:ltr; margin:0;
  display:flex; align-items:center; justify-content:center; padding:8px 0; min-width:0; }
/* .slide に高さが通っていないと img の max-height:100% が解決されず、
   幅だけで拡大されて画面からあふれる（広い画面ほどひどくなる） */
.slide img { max-width:96%; max-height:100%; width:auto; height:auto; object-fit:contain;
  box-shadow:0 2px 12px rgba(0,0,0,.18); background:#fff; }

.swipe-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  margin:0; padding:6px 14px; border-radius:14px; font-size:12px; color:#fff;
  background:rgba(43,38,32,.72); white-space:nowrap; pointer-events:none;
  transition:opacity .4s ease; }
.swipe-hint.is-gone { opacity:0; }

.dock { flex:0 0 auto; background:#fff; border-top:1px solid var(--line); }
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 14px 5px; }
.pager-btn { font:inherit; font-size:12px; font-weight:700; color:var(--ink); background:#fff;
  border:2px solid var(--ink); border-radius:999px; padding:6px 14px; cursor:pointer;
  white-space:nowrap; }
.pager-btn:disabled { opacity:.32; cursor:default; }
.dots { display:flex; gap:7px; align-items:center; }
.dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#d5ccc1;
  cursor:pointer; transition:width .18s ease, background .18s ease; }
.dot.is-on { width:19px; border-radius:4px; background:var(--green); }

.band { padding:2px 14px 14px; transition:transform .18s ease; }
.band[hidden] { display:none; }
.band.is-folded { transform:translateY(calc(100% - 18px)); }
.band-grab { width:34px; height:4px; border-radius:2px; background:#d8d0c5; margin:0 auto 8px;
  cursor:pointer; }
.band-label { font-size:10px; letter-spacing:.1em; color:var(--sub); margin-bottom:6px; }
.band-btn { display:block; width:100%; text-align:right; font:inherit; font-size:13px;
  color:var(--ink); background:var(--mint); border:0;
  border-radius:14px; padding:9px 12px; margin-bottom:6px; cursor:pointer; font-weight:700; }

.reader { position:fixed; inset:0; background:#fff; overflow-y:auto; z-index:10; }
.reader-bar { position:sticky; top:0; display:flex; justify-content:space-between;
  padding:10px 14px; background:#fff; border-bottom:2px solid var(--ink); }
.reader-bar button { font:inherit; font-size:12px; font-weight:700; background:none; border:0; color:var(--green); }
.reader-body { padding:16px 18px 60px; max-width:640px; margin:0 auto; }
.reader-body h2 { font-size:19px; line-height:1.5; margin:0 0 6px; }
.reader-by { font-size:12px; color:var(--sub); margin:0 0 18px; }
.reader-body p { font-size:var(--reader-size); line-height:2; margin:0 0 1em; }
.reader-body h3 { font-size:calc(var(--reader-size) + 1px); margin:1.8em 0 .6em; }
.reader-body blockquote { margin:0 0 1em; padding:.6em 1em; background:var(--mint);
  border-radius:6px; font-size:var(--reader-size); line-height:1.9; }
body.reading { overflow:hidden; }

.paywall { margin-top:1.6em; padding:18px 16px 20px; border:0;
  background:var(--mint); border-radius:20px; text-align:center; }
.paywall-lead { font-size:14px; font-weight:600; margin:0 0 8px; }
.paywall-body { font-size:12.5px; line-height:1.9; color:#5a534c; text-align:left; margin:0 0 12px; }
.band-lock { font-size:10px; color:var(--sub); background:#efece8; border-radius:999px; padding:0 6px; }

.locked { padding:26px 20px 60px; max-width:420px; margin:0 auto; text-align:center; }
.locked img { width:60%; border:2px solid var(--ink); border-radius:12px; box-shadow:0 6px 0 var(--mint2); }
.locked h1 { font-size:17px; margin:16px 0 8px; }
.locked .lead { font-size:13px; line-height:1.9; color:#5a534c; text-align:left; }
.cta { display:inline-block; margin-top:10px; padding:11px 22px; border:2px solid var(--ink); border-radius:999px;
  background:var(--green); color:#fff; text-decoration:none; font-size:14px; font-weight:700; white-space:nowrap;
  box-shadow:0 4px 0 var(--dark); }
.shelf-cta .cta { margin-top:0; }
.sub-link { font-size:12px; color:var(--sub); }

/* --- 画面が広いとき（タブレット・パソコン） ---
   もとはスマホ幅だけを見て組んでいたため、広い画面では中身が端まで伸びて間延びしていた。
   読む列を中央に寄せ、余白を持たせる。 */
@media (min-width: 720px) {
  .site-inner { padding:16px 32px; }
  .shelf-page { padding:48px 32px 72px; }
  .shelf-page h1 { font-size:32px; }
  .shelf { gap:30px 24px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

  .reader-head { padding:13px max(24px, calc(50% - 520px)); font-size:13px; }
  .pager { padding:11px max(24px, calc(50% - 340px)) 6px; }
  .band { padding:2px max(24px, calc(50% - 340px)) 16px; }
  .pager-btn, .band-btn { font-size:14px; }
  .band-btn { padding:11px 13px; }

  .reader-bar { padding:13px max(24px, calc(50% - 320px)); }
  .reader-body { padding:30px 24px 90px; }
  .reader-body h2 { font-size:22px; }

  .locked { max-width:520px; padding:44px 24px 80px; }
  .locked img { width:46%; }
  .locked h1 { font-size:19px; }
}

/* --- 見開きで見せる（パソコン幅） ---
   紙の冊子と同じに、表紙は1枚・中は見開き・裏表紙は1枚。
   右綴じなので、見開きは右が若いページ（.deck の direction:rtl が効く）。 */
@media (min-width: 900px) {
  .spread { display:flex; flex:0 0 100%; scroll-snap-align:center;
    align-items:center; justify-content:center; gap:0; padding:14px 24px; }
  .slide { flex:1 1 0; scroll-snap-align:none; padding:0; height:100%; }
  .slide img { max-width:100%; }
  /* 見開きの2枚は、紙の冊子と同じように折り目でくっつける。
     右綴じなので右が若いページ。それぞれ内側（中央）に寄せる。 */
  .slide:first-child:not(:only-child) { justify-content:flex-start; }
  .slide:last-child:not(:only-child) { justify-content:flex-end; }
  .swipe-hint { display:none; }
}

@media (max-width: 719px) {
  .shelf-cta { grid-template-columns:1fr; }
  .shelf-cta .cta { text-align:center; }
}